negozio v0.1.0

Negozio

An atomic state management prototype for React 18+

Usage

• use-count.js

import { createAtom } from 'magasin'

export default createAtom(0)

• count-button.jsx

import useCount from '/path/to/use-count'

export default function CountButton() {
  const [, setCount] = useCount()
  return <button onClick={() => setCount(c => c + 1)}>
    +
  </button>
}

• count-display.jsx

import useCount from '/path/to/use-count'

export default function CountDisplay() {
  const [count] = useCount()
  return <h3>Count is: {count}</h3>
}

• App.jsx

import CountButton from '/path/to/count-button'
import CountDisplay from '/path/to/count-display'

export default function App() {
  return <div>
    <CountDisplay />
    <CountButton />
  </div>
}

!NOTE The createAtom function can accept complex values other than string, number, such as array and object. It is based on the hook useSyncExternalStore in React 18

LICENSE

MIT