This package provides a versatile useInput
hook specifically designed to manage multiple input states within your React components. By leveraging techniques like useCallback
, it optimizes re-renders, ensuring a smooth and responsive user experience.⚡️
npm install react-lite-input
or
yarn add react-lite-input
First, import the useInput
hook from the package:
import useInput from "react-lite-input";
You can use the useInput
hook to manage the state of multiple input fields. The hook takes an initial values object and returns an object containing the current values and a handleLiteChange
function.
import React from "react";
import useInput from "react-lite-input";
const MyForm = () => {
const initialValues = { username: "", age: "" };
const { values, handleLiteChange } = useInput(initialValues);
const handleSubmit = (event) => {
event.preventDefault();
console.log(values); // Access the input values
// Access the username value
console.log(`Your username is: ${values.username}`);
// Perform other actions with the input values
};
return (
<form onSubmit={handleSubmit}>
<label>
Enter your username:
<input
type="text"
name="username"
value={values.username}
onChange={handleLiteChange}
/>
</label>
<label>
Enter your age:
<input
type="number"
name="age"
value={values.age}
onChange={handleLiteChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
};
export default MyForm;
const { values, handleLiteChange } = useInput(initialValue: InitialValues);
-
Parameters:
initialValue
: An object with keys representing the input names and values representing the initial values of the inputs.
-
Returns:
values
: An object containing the current values of the inputs.handleLiteChange
: A function to handle input changes. It should be used as the onChange event handler for input elements.
This package uses Jest for testing, make sure you have the following configurations setup in package.json file:
"jest": {
"preset": "ts-jest",
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"transform": {
"^.+\\.(ts|tsx)$": "ts-jest"
}
}
Contributions are welcome! Please open an issue or submit a pull request for any bug fixes or enhancements.
This project is licensed under MIT license.