useInput

About

Input hook for React.

Installation

npm install --save rooks

Importing the hook

import { useInput } from 'rooks';

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"}

Codesandbox Examples

Basic Usage

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.