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>
  );
}

Open Sandbox

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>
  );
}

Open Sandbox

Arguments

Argument	Type	Description	Default value
initialValue	string	Initial value of the string	""
opts	object	Options	{}

Options

Option key	Type	Description	Default value
validate	function	Validator function which receives changed valued before update as well as current value and should return true or false	undefined

Return value

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

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

❇️ State

🔥 Effects

⚛️ UI

✨ Misc

🚀 Events

📝 Form

🚃 Navigator

useInput

About

Examples

Simple example

With optional validator

Arguments

Options

Return value

Join the community!