Version: v4.10.1

use-input

About#

Input hook for React.

Installation#

npm install --save @rooks/use-input

Importing the hook#

import useInput from "@rooks/use-input"

Usage#

Base

function Demo() {
  const myInput = useInput("hello");
  return (
    <div>
      <input {...myInput} />
      <p>
        Value is <b>{myInput.value}</b>
      </p>
    </div>
  );
}

render(<Demo/>)

With optional validator

function Demo() {
  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>
  );
}

render(<Demo/>)

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 Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.