recoil-group

Manage your atoms as group

Manage your states as group of atoms, not seperated ones.

Features

• Type-safe
• Fully customizable (key, defaultValue)
• Provides the 'all-in-one' group object (Optional)
• Supports recoil-nexus

Example

1import { createRecoilGroup } from 'recoil-group'
2
3const defaultValue = {
4  left: 0,
5  right: 1,
6}
7
8export const {
9  useGroupValue: useCounterGroupValue,
10  useGroupItemState: useCounterGroupItemState,
11  useGroupItemValue: useCounterGroupItemValue,
12  useSetGroupItemState: useSetGroupItemState,
13} = createRecoilGroup<typeof defaultValue>({
14  groupKey: 'counter-group',
15  groupDefaultProvider: defaultValue,
16  groupItemDefaultProvider(key) {
17    return defaultValue[key]
18  },
19})
20
21// ...
22
23function CounterLeft({ type }: { type: 'left' | 'right' }) {
24  const [counter, setCounter] = useCounterGroupItemState(type)
25
26  return (
27    <button type='button' onClick={() => setCounter((count) => count + 1)}>
28      {type} count is: {counter}
29    </button>
30  )
31}

License

MIT