A utility library providing common array manipulation functions and React hooks for tasks such as chunking, deep comparison, filtering, sorting, and more. Ideal for handling arrays in JavaScript and React applications.
You can install the library using npm or yarn:
npm install array-helper-lib
Features
Array Operations: Functions for chunking, deep comparison, filtering, finding, flattening, grouping, sorting, etc.
React Hooks: Convenient hooks to manipulate arrays within React components.
Functional Programming: Designed for immutable operations with pure functions.
Lightweight: Only includes essential functionality, no dependencies.
Usage
Importing Functions
You can import individual functions or the entire library in your JavaScript or React code.
Example:
javascript
Copy code
import { chunk, deepCompare, difference, filter, flatten } from 'array-helper-lib';
Importing React Hooks
You can also import the React hooks to use in your components.
Example:
javascript
Copy code
import { useFilteredArray, useSortedArray, useChunkedArray } from 'array-helper-lib';
Example Usage
Array Operations
Chunking an Array
javascript
Copy code
import { chunk } from 'array-helper-lib';
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const chunked = chunk(arr, 3);
console.log(chunked); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
Deep Comparison
javascript
Copy code
import { deepCompare } from 'array-helper-lib';
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
console.log(deepCompare(obj1, obj2)); // true
React Hooks
Using the useFilteredArray Hook
javascript
Copy code
import React from 'react';
import { useFilteredArray } from 'array-helper-lib';
const MyComponent = () => {
const data = [1, 2, 3, 4, 5, 6];
const filteredData = useFilteredArray(data, (item) => item > 3);
return (
<div>
<h1>Filtered Data</h1>
<pre>{JSON.stringify(filteredData, null, 2)}</pre>
</div>
);
};
export default MyComponent;
Using the useSortedArray Hook
javascript
Copy code
import React from 'react';
import { useSortedArray } from 'array-helper-lib';
const MyComponent = () => {
const data = [5, 3, 8, 1, 4];
const sortedData = useSortedArray(data, (a, b) => a - b); // Sorting in ascending order
return (
<div>
<h1>Sorted Data</h1>
<pre>{JSON.stringify(sortedData, null, 2)}</pre>
</div>
);
};
export default MyComponent;
API Documentation
Array Operations
chunk(arr, size): Splits an array into chunks of a given size.
Example: chunk([1, 2, 3, 4, 5], 2) → [[1, 2], [3, 4], [5]]
deepCompare(obj1, obj2): Performs a deep comparison between two objects or arrays.
Example: deepCompare({ a: 1 }, { a: 1 }) → true
difference(arr1, arr2): Returns an array of elements present in arr1 but not in arr2.
Example: difference([1, 2, 3], [2, 3]) → [1]
filter(arr, callback): Filters the array using a given callback function.
Example: filter([1, 2, 3, 4], (item) => item > 2) → [3, 4]
flatten(arr): Flattens a nested array into a single array.
Example: flatten([1, [2, [3, 4]]]) → [1, 2, 3, 4]
groupBy(arr, key): Groups the array elements based on a given key or property.
Example: groupBy([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 25 }, { name: 'Charlie', age: 30 }], 'age') → { 25: [{...}, {...}], 30: [{...}] }
React Hooks
useFilteredArray(data, filterFn): A hook that filters an array based on a condition.
Example: useFilteredArray([1, 2, 3, 4, 5], (item) => item > 3) → [4, 5]
useSortedArray(data, compareFn): A hook that sorts an array based on a comparison function.
Example: useSortedArray([5, 3, 8, 1, 4], (a, b) => a - b) → [1, 3, 4, 5, 8]
useChunkedArray(data, chunkSize): A hook that splits an array into chunks of the specified size.
Example: useChunkedArray([1, 2, 3, 4, 5, 6], 2) → [[1, 2], [3, 4], [5, 6]]
useMappedArray(data, mapFn): A hook that maps over an array to return a new array.
Example: useMappedArray([1, 2, 3], (item) => item * 2) → [2, 4, 6]
useGroupedArray(data, groupFn): A hook that groups the array elements based on a given function.
Example: useGroupedArray([1, 2, 3, 4], (item) => item % 2) → { 1: [1, 3], 0: [2, 4] }