@khunshan/react-custom-hooks
v0.0.1
Published
This npm package includes multiple custom hooks for React, helping streamline your daily development tasks.
Downloads
14
Readme
React Custom Hooks Library
This npm package includes multiple custom hooks for React, helping streamline your daily development tasks.
Installation
To install the package, run the following command:
npm install react-custom-hooks
Here is the README.md file in proper Markdown format that will correctly render headings, code blocks, and lists when viewed on GitHub or any markdown viewer:
md
Copy code
# React Custom Hooks Library
This npm package includes multiple custom hooks for React, helping streamline your daily development tasks.
## Installation
To install the package, run the following command:
```bash
npm install react-custom-hooks
Available Hooks
1. useArray.js
This custom hook provides an easy way to manage array operations in React.
Features:
push
: Adds an element to the array.filter
: Filters the array based on a callback function.update
: Updates an element at a specific index.remove
: Removes an element from a specific index.clear
: Clears the entire array.set
: Manually sets the array.
Example usage
import React from 'react';
import useArray from 'react-custom-hooks/useArray';
function ExampleComponent() {
const { array, push, remove, update, filter, clear } = useArray([1, 2, 3, 4, 5]);
return (
<div>
<h1>Array: {array.join(", ")}</h1>
<button onClick={() => push(6)}>Add 6</button>
<button onClick={() => update(1, 10)}>Update index 1 to 10</button>
<button onClick={() => remove(3)}>Remove index 3</button>
<button onClick={() => filter(n => n < 4)}>Keep numbers less than 4</button>
<button onClick={clear}>Clear</button>
</div>
);
}
export default ExampleComponent;