The smallest state management library for React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
examples
src
.coveralls.yml
.gitignore
.npmrc
.prettierrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
rollup.config.js
tsconfig.json
tslint.json
yarn.lock

README.md

Mistate

npm gzip size Build Status Coverage Status npm GitHub license

The smallest state management library for React

Less than 1kb after gzip, 40 lines code only, one Api only.

Installation

yarn add mistate

Usage

import React from 'react'
import { render } from 'react-dom'
import { create } from 'mistate'

const { get, set } = create({ text: 'foo' })

const App = () => (
  <div>
    <span>{get(s => s.text)}</span>
    <button onClick={() => set({ text: 'bar' })}>set</button>
    <button onClick={() => set({ text: 'foo' })}>reset</button>
  </div>
)

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

Check on CodeSandbox: example

Examples

API

Only one Api:

const { get, set, getState } = create(init)

get()

Get state in Component, Component will re-render if state is setted;

First, you need create a store, example:

const { get, set } = create({ text: 'foo' })

Simple usage

<span>{get(s => s.text)}</span>

Using selectors

<div>
  {get(
    s => s.text,
    text => (
      <span>{text}</span>
    ),
  )}
</div>

set()

Update state use set() in it, you can call it in anywhere, in React lifecycle fn、stateless componet... even out of React component, so you don't need HOC.

Set with object

set({ text: 'bar' })

Set with function

set(s => ({ text: s.text + 'bar' }))

Return a Promise

async function setText() {
  const newState = await set({ text: 'bar' })
  // { text: 'bar' }
}

getState()

Get the current state object.

const { getState } = create({ text: 'foo' })
const currentState = getState()

License

MIT License