Hooks

Because you will be using refs to modify the DOM a lot, domstatejsx provides a set of helper “hooks”. Each hook receives a ref and returns a [get, set] pair. The getter reads the current value from the DOM element and the setter writes a new value to it. Setters can also receive a function to perform incremental changes:

const [, setCount] = useIntContent(refs.countSpan);
setCount((prev) => prev + 1);

Here is the full list:

useTextContent

Inspect/modify the text content of an element.

function App() {
  const [textHeader] = useRefs();
  const [, setText] = useTextContent(textHeader);
  setInterval(() => {
    setText((prev) => prev + ' and on');
  }, 1000);
  return <h1 ref={textHeader}>Time goes on</h1>;
}

useIntContent

Like useTextContent but reads/writes the content as an integer.

useTextInput

Inspect/modify the value of a text input.

function App() {
  const [textInput] = useRefs();
  const [getText] = useTextInput(textInput);

  function handleClick() {
    alert(`Hello ${getText()}`);
  }

  return (
    <>
      <div>
        <input value="world" ref={textInput} />
      </div>
      <div>
        <button onClick={handleClick}>ClickMe</button>
      </div>
    </>
  );
}

useNumberInput

Inspect/modify the value of a number input as an integer.

useCheckbox

Inspect/modify the checked status of a checkbox.

function App() {
  const [checkbox] = useRefs();
  const [isChecked] = useCheckbox(checkbox);

  function handleClick() {
    alert(`The checkbox is ${isChecked() ? '' : 'not'} checked`);
  }

  return (
    <>
      <div>
        <input type="checkbox" ref={checkbox} />
      </div>
      <div>
        <button onClick={handleClick}>ClickMe</button>
      </div>
    </>
  );
}

useStyleBoolean

Toggle a style property between two values. Signature: useStyleBoolean(ref, property, onValue, offValue). The getter returns whether the property matches onValue; the setter receives a boolean and sets the property to onValue or offValue.

function App() {
  const [span] = useRefs();
  const [, setLineThrough] = useStyleBoolean(
    span,
    'text-decoration',
    'line-through',
    null,
  );

  function handleCheck(event) {
    setLineThrough(event.target.checked);
  }

  return (
    <>
      <span ref={span}>Hello world</span>
      <input type="checkbox" onChange={handleCheck} />
    </>
  );
}

useClassBoolean

Like useStyleBoolean but toggles classes instead of style properties.

usePropertyBoolean

Like useStyleBoolean but for generic HTML properties:

function App() {
  const [button] = useRefs();
  const [, setLoading] = usePropertyBoolean(button, 'disabled', true, false);

  async function handleClick() {
    setLoading(true);
    await fetch(...);
    setLoading(false);
  }

  return <button onClick={handleClick} ref={button}>Download stuff</button>;
}

useErrorMessage

Like useTextContent, but also hides the whole element when the setter’s argument is falsy.

useList

Accepts a ref and a component function. The setter appends new child elements to the element bound to the ref by invoking the component with each argument. The getter returns refs for all the items that have been added:

function App() {
  const [textInput, todoList] = useRefs();
  const [getText, setText] = useTextInput(textInput);
  const [getTodos, addTodo] = useList(todoList, ({ text }) => <li>{text}</li>);

  function handleSubmit(event) {
    event.preventDefault();
    if (!getText()) return;
    addTodo({ text: getText() });
    setText('');
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input ref={textInput} />
        <button>Add</button>
      </form>
      <ul ref={todoList} />
    </>
  );
}

The refs returned by the getter expose the component’s context under their .context property (see Contexts).

useLocalStorage

Accepts a localStorage key and returns a getter/setter pair for reading/writing it.

combineHooks

Combines several hooks (or any getter/setter pair) into one, declaring that a single piece of state lives in multiple places in the DOM at the same time. See combineHooks.

useControlledInput

Works with any component that exposes get and set functions through its context, treating it like a controlled input. See Controlled inputs.