--- title: XState description: This doc describes `jotai/xstate` bundle. nav: 4.04 --- This doc describes `jotai/xstate` bundle. Jotai's state management is primitive and flexible, but that sometimes means too free. XState is a sophisticated library to provide a better and safer abstraction for state management. ## Install You have to install `xstate` to access this bundle and its functions. ``` npm install xstate # or yarn add xstate ``` ## atomWithMachine `atomWithMachine` creates a new atom with XState machine. It receives a function `getMachine` to create a new machine. `getMachine` is invoked at the first use with `get` argument, with which you can read other atom values. ```js import { useAtom } from 'jotai' import { atomWithMachine } from 'jotai/xstate' import { assign, createMachine } from 'xstate' const createEditableMachine = (value: string) => createMachine < { value: string } > { id: 'editable', initial: 'reading', context: { value, }, states: { reading: { on: { dblclick: 'editing', }, }, editing: { on: { cancel: 'reading', commit: { target: 'reading', actions: assign({ value: (_, { value }) => value, }), }, }, }, }, } const defaultTextAtom = atom('edit me') const editableMachineAtom = atomWithMachine((get) => // `get` is available only for initializing a machine createEditableMachine(get(defaultTextAtom)) ) const Toggle: React.FC = () => { const [state, send] = useAtom(editableMachineAtom) return (
enter
to commit. Press{' '}
esc
to cancel.