# react-super-state

> A state management library using hooks.

Latest version **1.0.1** (published 2019-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-super-state
pnpm add react-super-state
yarn add react-super-state
bun add react-super-state
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-06-22 |
| First published | 2018-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 376.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Mark Murray |
| Maintainers | mmmurray |
| Keywords | react, react-hooks, hooks, state, state-management, reducer, typescript |

## Links

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

## 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.1 (latest) — 2019-06-22
- 1.0.0 — 2019-02-03
- 0.1.1 — 2018-12-24
- 0.1.0 — 2018-12-24
- 0.0.2 — 2018-11-25
- 0.0.1 — 2018-11-25

## README

# React Super State

[![Travis](https://img.shields.io/travis/mmmurray/react-super-state.svg)](https://travis-ci.org/mmmurray/react-super-state)
[![npm](https://img.shields.io/npm/v/react-super-state.svg)](https://www.npmjs.com/package/react-super-state)

A state management library using hooks.

## Usage

[![Edit 01lyjy810p](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/01lyjy810p)

`state.js`

```js
import React from 'react'
import createSuperState from 'react-super-state'

const initialState = {
  value: 0,
}

const reducers = {
  add: (state, payload) => ({
    ...state,
    value: state.value + payload.amount,
  }),
}

export const { useSuperState, Provider } = createSuperState(
  reducers,
  initialState,
)
```

`display.js`

```js
import { useSuperState } from './state'

const Display = () => {
  const { state } = useSuperState()

  return <span>Value is: {state.value}</span>
}

export default Display
```

`add.js`

```js
import React from 'react'
import { useSuperState } from './state'

const Add = ({ amount }) => {
  const { actions } = useSuperState()

  return <button onClick={() => actions.add({ amount })}>Add {amount}</button>
}

export default Add
```

`index.js`

```js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from './state'
import Add from './add'
import Display from './display'

const App = () => (
  <Provider>
    <Display />
    <Add amount={1} />
    <Add amount={10} />
  </Provider>
)

render(<App />, document.getElementById('root'))
```

To create a new state provider and custom hook, call `createSuperState` giving it a map of reducer functions and the initial state. A reducer function is passed two arguments, the first is the current state, and the second is a payload object which should contain enough information to transform the current state into a new state. Each reducer function should return an entirely new state object which will replace the previous state.

The object returned from `createSuperState` contains a `Provider` and a `useSuperState` custom hook. Any component that uses `useSuperState` must at some level be rendered inside of the `Provider` component. The `useSuperState` hook also returns an object with two properties. One is `state` which holds the current state and the other is `actions` which is a map of functions for updating the state. There is one action per reducer and each action takes one argument which is the payload for that reducer.

## Best Practices

- Create a singleton module that exports the result of calling `createSuperState` so that it can be imported anywhere in the codebase.
- It is strongly advised to avoid mutating the state object that is passed to the reducer functions and returned from `useSuperState`.

## TypeScript

React Super State includes full TypeScript definitions. Type information is infered from the initial state object and the reducer function arguments so that the `state` and `actions` objects returned from `useSuperState` are fully typed to provide an fully type safe API.

In addition TypeScript will return a read only state from `useSuperState` to prevent accidental mutation.

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