Primitive and flexible state management for React


atomWithToggle creates a new atom with a boolean as initial state & a setter function to toggle it.

This avoids the boilerplate of having to set up another atom just to update the state of the first.

import { WritableAtom, atom } from 'jotai'
export function atomWithToggle(
initialValue?: boolean
): WritableAtom<boolean, boolean | undefined> {
const anAtom = atom(initialValue, (get, set, nextValue?: boolean) => {
const update = nextValue ?? !get(anAtom)
set(anAtom, update)
return anAtom as WritableAtom<boolean, boolean | undefined>

An optional initial state can be provided as the first argument.

The setter function can have an optional argument to force a particular state, such as if you want to make a setActive function out of it.

Here is how it's used.

import { atomWithToggle } from 'XXX'
// will have an initial value set to true
const isActiveAtom = atomWithToggle(true)

And in a component:

const Toggle = () => {
const [isActive, toggle] = useAtom(isActiveAtom)
return (
<button onClick={() => toggle()}>
isActive: {isActive ? 'yes' : 'no'}
<button onClick={() => toggle(true)}>force true</button>
<button onClick={() => toggle(false)}>force false</button>