useModel
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.
Example
import { useModel } from "kaioken"
function App() {
const [inputRef, inputValue, setInputValue] = useModel("")
const handleClick = () => {
setInputValue("")
}
return (
<div>
<input ref={inputRef} type="text" />
<button onclick={handleClick}>Reset Input</button>
</div>
)
}