API reference

JSX runtime

• jsx, jsxs, jsxDEV — automatic JSX runtime functions. You normally do not call these directly; configure your bundler to use domstatejsx as the JSX import source (see Getting started).

• createElement, Fragment — classic JSX runtime. Used with pragma comments:

  /** @jsx createElement */
  /** @jsxFrag Fragment */

• Fragment — renders a native DocumentFragment. Fragments are transparent in the DOM: their children are moved into the parent element. Refs and context Providers cannot be attached to fragment-returning components.

Refs

• useRefs() — returns an endless list of empty ref objects.

  const [a, b, c] = [{}, {}, {}]; // equivalent to useRefs()

• useRefProxy() — returns an object that lazily creates refs when you access properties on it.

  const refs = useRefProxy();
  // refs.username creates a ref on first access

Hooks

Hooks take a ref and return a [get, set] pair. Setters accept either a value or a function (prev) => next. See Hooks for examples.

• useTextContent(ref) — read/write text content
• useIntContent(ref) — read/write text content as an integer
• useTextInput(ref) — read/write the value of a text input
• useNumberInput(ref) — read/write the value of a number input
• useCheckbox(ref) — read/write the checked status of a checkbox
• useStyleBoolean(ref, property, onValue, offValue) — toggle a style property
• useClassBoolean(ref, onValue, offValue) — toggle classes
• usePropertyBoolean(ref, property, onValue, offValue) — toggle an HTML property
• useErrorMessage(ref) — read/write text content, hiding the element when falsy
• useList(ref, component) — append children created from a component
• useLocalStorage(key) — read/write a localStorage value
• useControlledInput(ref) — treat a custom component as a controlled input
• combineHooks(...hooks) — combine several hooks into one [get, set] pair

Context

See Contexts for a full guide.

• createContext(defaultValue?) — create a new context object
• Context.Provider — attach a value to the DOM so it can be looked up; must wrap a single element
• useContextUp(node, context) — walk up from node to find a provider
• useContextDown(node, context) — search the subtree under node for providers
• useContextSide(node, context, upContext) — find a common ancestor’s subtree, then search downwards
• findUp(node, context) — like useContextUp but returns the provider element

Data fetching

See Queries for examples.

• useQuery(options) — fetch remote data; returns { refetch }
• useMutation(options) — mutate remote data; returns { mutate }

Forms

See Forms for a full guide.

• useForm(options) — returns { registerForm, register, registerError, registerButton, handleSubmit, getData, reset }

Routing

See Routing for a full guide.

• Route — a component that renders its children when its path matches
• Link — a component that renders a button that navigates to a path

Other utilities

• runOnlyLast(fn) — ensure only the most recent invocation of fn runs.