useAtom • tldraw Docs

Creates a new atom and returns it. The atom will be created only once.

See atom.

function useAtom<Value, Diff = unknown>(
  name: string,
  valueOrInitialiser: (() => Value) | Value,
  options?: AtomOptions<Value, Diff>
): Atom<Value, Diff>

Example

const Counter = track(function Counter() {
  const count = useAtom('count', 0)
  const increment = useCallback(() => count.set(count.get() + 1), [count])
  return <button onClick={increment}>{count.get()}</button>
})

Parameters

Name	Description
`name`	`string` The name of the atom. This does not need to be globally unique. It is used for debugging and performance profiling.
`valueOrInitialiser`	`(() => Value) \| Value` The initial value of the atom. If this is a function, it will be called to get the initial value.
`options`	`AtomOptions<Value, Diff>` Options for the atom.

Returns

Atom<Value, Diff>