react-sweet-context

a lightweight library with a simple way of working to help you manage local state.

Install

1npm install --save react-sweet-context

Usage

Create a single store

1import { Store } from 'react-sweet-context'
2
3const store = new Store({
4  name: 'Toggle',
5  state: false,
6  action({ set, get }) {
7    return (state?: boolean) => {
8      set((prev) => state ?? !prev)
9      // set(state ?? !get())
10    }
11  }
12})
13// hook re-render when state changed
14export const useToggle = store.createHook()
15
16// hook get only action and does not re-render when state change
17export const useToggleAction = store.createHookAction()
18
19// Context Provider container of this store
20export const ToggleContainer = store.createContainer({
21  // trigger on container will be mount
22  // action is return value when store instance created
23  create({ get }, action) {
24    console.log(get())
25    console.log(action)
26  }
27})

Create a object store

1import { Store } from 'react-sweet-context'
2
3const state = { a: 0, b: 0 }
4type StateType = typeof state
5
6const store = new Store({
7  name: 'ObjectStore',
8  state,
9  action: ({ get, set, shallow }) => ({
10    reset: () => set({ a: 0, b: 0 }),
11
12    add(key: keyof StateType) {
13      shallow({ [key]: get()[key] + 1 })
14    }
15  })
16})
17
18export const useObject = store.createHook()
19
20export const useObjectFlag = store.createHook(
21  (state, flag: 'a' | 'b') => state[flag]
22)

Usage store, hook & container

1const Check = () => {
2  const [toggle, setToggle] = useToggle()
3
4  return (
5    <label>
6      <input type='checkbox' checked={toggle} onChange={() => setToggle()} />
7      Toggle
8    </label>
9  )
10}
11
12const Counter = ({ flag }: { flag: 'a' | 'b' }) => {
13  const [num, action] = useObjectFlag(flag)
14  return (
15    <button type='button' onClick={() => action.add(flag)}>
16      Num "{flag}": {num}
17    </button>
18  )
19}
20
21const TotalCounter = () => {
22  const [obj] = useObject()
23  return <div>{JSON.stringify(obj)}</div>
24}
25
26const App = () => {
27  return (
28    <div>
29      <div>
30        Single container
31        <Check />
32        <Check />
33      </div>
34      <hr />
35      <div>
36        Multi container
37        <ToggleContainer state={true}>
38          <Check />
39        </ToggleContainer>
40        <ToggleContainer state={false}>
41          <Check />
42        </ToggleContainer>
43      </div>
44      <hr />
45      Single store with object
46      <TotalCounter />
47      <div>
48        <Counter flag='a' />
49        <Counter flag='b' />
50      </div>
51    </div>
52  )
53}

License

MIT © longcuxit