# state-context

> Simple state-management with React Context API

Latest version **0.1.3** (published 2019-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install state-context
pnpm add state-context
yarn add state-context
bun add state-context
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-06-09 |
| First published | 2019-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Michal Raczkowski |
| Maintainers | mrac |
| Keywords | state, management, react, context, hooks |

## Links

- npm: https://www.npmjs.com/package/state-context
- Repository: https://github.com/mrac/state-context
- Homepage: https://github.com/mrac/state-context#readme
- Issues: https://github.com/mrac/state-context/issues
- npm.io page: https://npm.io/package/state-context

## 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

- 0.1.3 (latest) — 2019-06-09
- 0.1.2 — 2019-06-08
- 0.1.1 — 2019-06-08
- 0.1.0 — 2019-06-08

## README

# state-context

Simple state-management with React Context API

## Install

```
npm install state-context
```

## Idea

`state-context` does state management for React. In terms of complexity it is located between using local state and Redux.

1. With `state-context` it's very easy to migrate your component from local state to global state:

<table>
<tr>
<td>
  Local state
</td>
<td>
  Global state with <code>state-context</code>
</td>
</tr>
<tr>
<td valign="top">
  
```tsx
import * as React from 'react';


const MyBirthday: React.SFC = () => {

  const [age, setAge] = React.useState(20);

  return (
    <button onClick={() => setAge(age + 1)}>
      Celebrate {age} birthday!
    </button>
  );
};
```
[Plunker](https://next.plnkr.co/edit/kyuJJXI5gKEtUEcS?open=src%2Fmy-birthday.js&preview)
</td>
<td valign="top">
  
```tsx
import * as React from 'react';
import { MyStore } from './my-store';

const MyBirthday: React.SFC = () => {
  const context = React.useContext(MyStore);
  const [age, setAge] = context.useState.age;

  return (
    <button onClick={() => setAge(age + 1)}>
      Celebrate {age} birthday!
    </button>
  );
};
```
[Plunker](https://next.plnkr.co/edit/R5vFvHhwvjSbAK1d?open=src%2Fmy-birthday.js&preview)
</td>
</tr>
</table>

2. It's useful for cases where Redux boilerplate would be an overhead (it still makes sense and is easy to decouple state management from UI layer).

<table>
<tr>
<td width="300"></td>
<td width="200">Redux</td>
<td width="200"><code>state-context</code></td>
</tr>
<tr>
<td><code>actions.ts</code></td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td><code>actions.test.ts</code></td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td><code>reducer.ts</code></td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td><code>reducer.test.ts</code></td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td><code>side-effects.ts</code></td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td><code>side-effects.test.ts</code></td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td><code>container.tsx</code></td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<td><code>container.test.tsx</code></td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<td><code>ui-layer-component.tsx</code></td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<td><code>ui-layer-component.test.tsx</code></td>
<td>YES</td>
<td>YES</td>
</tr>
</table>

3. You can set up one global store or multiple shared-state containers.
4. It's still deterministic as you can attach middleware and watch/undo/redo.
5. You have TypeScript support out of the box.

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