useModel

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

useModel 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.

Example

import { useModel } from "kaioken"

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

  const handleClick = () => {
    setInputValue("")
  }

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

Related

• useRef