Rooks
Keyboard & Input

useInput

About

Input hook for React.


Examples

Simple example

import { useInput } from "rooks";
export default function App() {
  const myInput = useInput("hello");
  return (
    <div>
      <input {...myInput} />
      <p>
        Value is <b>{myInput.value}</b>
      </p>
    </div>
  );
}

With optional validator

import { useInput } from "rooks";
export default function App() {
  const myInput = useInput("hello", {
    validate: newValue => newValue.length < 15,
  });
  return (
    <div>
      <p> Max length 15 </p>
      <input {...myInput} />
      <p>
        Value is <b>{myInput.value}</b>
      </p>
    </div>
  );
}

Arguments

ArgumentTypeDescriptionDefault value
initialValuestringInitial value of the string""
optsobjectOptions{}

Options

Option keyTypeDescriptionDefault value
validatefunctionValidator function which receives changed valued before update as well as current value and should return true or falseundefined

Return value

Return valueTypeDescription
{value, onChange}ObjectObject containing {value : "String", onChange: "function that accepts an event and updates the value of the string"}

Next

useFileDropRef

Next

useKey

On this page