react-sweet-context v1.0.1

react-sweet-context

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

Install

npm install --save react-sweet-context

Usage

Create a single store

import { Store } from 'react-sweet-context'

const store = new Store({
  name: 'Toggle',
  state: false,
  action({ set, get }) {
    return (state?: boolean) => {
      set((prev) => state ?? !prev)
      // set(state ?? !get())
    }
  }
})
// hook re-render when state changed
export const useToggle = store.createHook()

// hook get only action and does not re-render when state change
export const useToggleAction = store.createHookAction()

// Context Provider container of this store
export const ToggleContainer = store.createContainer({
  // trigger on container will be mount
  // action is return value when store instance created
  create({ get }, action) {
    console.log(get())
    console.log(action)
  }
})

Create a object store

import { Store } from 'react-sweet-context'

const state = { a: 0, b: 0 }
type StateType = typeof state

const store = new Store({
  name: 'ObjectStore',
  state,
  action: ({ get, set, shallow }) => ({
    reset: () => set({ a: 0, b: 0 }),

    add(key: keyof StateType) {
      shallow({ [key]: get()[key] + 1 })
    }
  })
})

export const useObject = store.createHook()

export const useObjectFlag = store.createHook(
  (state, flag: 'a' | 'b') => state[flag]
)

Usage store, hook & container

const Check = () => {
  const [toggle, setToggle] = useToggle()

  return (
    <label>
      <input type='checkbox' checked={toggle} onChange={() => setToggle()} />
      Toggle
    </label>
  )
}

const Counter = ({ flag }: { flag: 'a' | 'b' }) => {
  const [num, action] = useObjectFlag(flag)
  return (
    <button type='button' onClick={() => action.add(flag)}>
      Num "{flag}": {num}
    </button>
  )
}

const TotalCounter = () => {
  const [obj] = useObject()
  return <div>{JSON.stringify(obj)}</div>
}

const App = () => {
  return (
    <div>
      <div>
        Single container
        <Check />
        <Check />
      </div>
      <hr />
      <div>
        Multi container
        <ToggleContainer state={true}>
          <Check />
        </ToggleContainer>
        <ToggleContainer state={false}>
          <Check />
        </ToggleContainer>
      </div>
      <hr />
      Single store with object
      <TotalCounter />
      <div>
        <Counter flag='a' />
        <Counter flag='b' />
      </div>
    </div>
  )
}

License

MIT © longcuxit