atomWithToggle은 불리언 값을 초기 상태로 가지는 새로운 아톰과 이를 토글할 수 있는 설정 함수를 생성합니다.

이를 통해 첫 번째 아톰의 상태를 업데이트하기 위해 또 다른 아톰을 설정하는 보일러플레이트 코드를 피할 수 있습니다.

import { WritableAtom, atom } from 'jotai'

export function atomWithToggle(
  initialValue?: boolean,
): WritableAtom<boolean, [boolean?], void> {
  const anAtom = atom(initialValue, (get, set, nextValue?: boolean) => {
    const update = nextValue ?? !get(anAtom)
    set(anAtom, update)
  })

  return anAtom as WritableAtom<boolean, [boolean?], void>
}

첫 번째 인자로 초기 상태를 선택적으로 제공할 수 있습니다.

설정 함수는 특정 상태를 강제로 설정하기 위한 선택적 인자를 가질 수 있습니다. 예를 들어, 이를 통해 setActive 함수를 만들 수 있습니다.

사용 방법은 다음과 같습니다.

import { atomWithToggle } from 'XXX'

// 초기값을 true로 설정
const isActiveAtom = atomWithToggle(true)

컴포넌트에서의 사용 예시:

const Toggle = () => {
  const [isActive, toggle] = useAtom(isActiveAtom)

  return (
    <>
      <button onClick={() => toggle()}>
        isActive: {isActive ? 'yes' : 'no'}
      </button>
      <button onClick={() => toggle(true)}>force true</button>
      <button onClick={() => toggle(false)}>force false</button>
    </>
  )
}