# @anissoft/state-react

> React integration of @anissoft/state

Latest version **1.0.8** (published 2023-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @anissoft/state-react
pnpm add @anissoft/state-react
yarn add @anissoft/state-react
bun add @anissoft/state-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-04-13 |
| First published | 2020-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alexey |
| Maintainers | anissoft |
| Keywords | state, react, hook |

## Links

- npm: https://www.npmjs.com/package/@anissoft/state-react
- Repository: https://github.com/Anissoft/js-libs
- Homepage: https://github.com/Anissoft/js-libs/tree/master/packages/state-react#readme
- Issues: https://github.com/Anissoft/js-libs/issues
- npm.io page: https://npm.io/package/@anissoft/state-react

## Dependencies (1)

- [@anissoft/state](https://npm.io/package/@anissoft/state.md) ^1.0.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2023-04-13
- 1.0.7 — 2023-04-13
- 1.0.6 — 2023-04-13
- 1.0.4 — 2022-10-31
- 1.0.3 — 2022-06-24
- 1.0.2 — 2021-06-10
- 1.0.1 — 2021-04-02
- 1.0.0 — 2021-02-08
- 0.0.1 — 2020-12-15

## README

# Welcome to @anissoft/state-react 👋

## Installation

Just run [`npm install`](https://docs.npmjs.com/getting-started/installing-npm-packages-locally) command:

```bash
$ npm install @anissoft/state-react --save
```

## Usage

You can access state object in your React components via handy [hook](https://reactjs.org/docs/hooks-overview.html)

```tsx
import * as React from 'react';
import { useStateObject } from '@anissoft/state-react';

function Countdown(props: { start: number }) {
  const state = useStateObject({ timeLeft: start });

  React.useEffect(
    () => {
      const interval = setInterval(
        () => {
          if ( state.timeLeft === 0) {
            clearInterval(interval);
          } else {
           state.value.timeLeft = state.value.timeLeft - 1;
          }
        },
        1000,
      );

      return () => clearInterval(interval);
    [],
  );

  return (
    <div>
      <span>Seconds left {state.value.timeLeft}</span>
    </div>
  )
}
```

`useStateObject` can accept already created State object as agrument:

```tsx
import * as React from "react";
import { useStateObject } from "@anissoft/state-react";

import myState from "Models/state";

function Component() {
  const state = useStateObject(myState);

  React.useEffect(() => {
    return myState.subscrube(() => {
      /* ... */
    });
  }, []);

  return <div>{/* ... */}</div>;
}
```

You can pass comparator as second argument, to specify condition when hook should initiate component rerender:

```tsx
import * as React from "react";
import { useStateObject } from "@anissoft/state-react";

function Countdown({ timeout }: { timeout: number }) {
  const state = useuseStateObjectBox({ timeLeft: timeout }, (newValue) => newValue.timeLeft >= 0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      state.value.timeLeft = state.value.timeLeft - 1;
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <span>{`Seconds left ${state.value.timeLeft}`}</span>
    </div>
  );
}
```

## Author

👤 **Alexey Anisimov**

- Github: [@Anissoft](https://github.com/Anissoft)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check [issues page](https://github.com/Anissoft/box/issues).

---
_Source: https://npm.io/package/@anissoft/state-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._