Keyboard & Input
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>
);
}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>
);
}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"} |