@rooks/use-input
TypeScript icon, indicating that this package has built-in type declarations

4.11.2 • Public • Published

@rooks/use-input

Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

npm install rooks

or

yarn add rooks

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

TitleCard

Build Status

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

Package Sidebar

Install

npm i @rooks/use-input

Weekly Downloads

1

Version

4.11.2

License

MIT

Unpacked Size

9.85 kB

Total Files

13

Last publish

Collaborators

  • imbhargav5