Similar to useRef, but allows you to easily set up two-way binding for a given input, textarea or select element.

takes one argument - initialValue, and returns the following:

  • elementRef: A Ref used to bind to the target element.
  • value: The element's current value (alternatively gives the value of 'checked' if used on a checkbox / radio)
  • setValue: function provided to enable setting the value from code.


import { useModel } from "kaioken"

function MyComponent() {
  const [inputRef, inputValue, setInputValue] = useModel("")

  const handleClick = () => {

  return (
      <input ref={inputRef} type="text" />
      <button onclick={handleClick}>Reset Input</button>