Version: Next

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#

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

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.

Last updated on by imbhargav5