useArray
Importing useArray Hook​
import { useArray } from '@ciceksepeti/cui-hooks';
Example​
tip
import React from 'react';
import { useArray } from '@ciceksepeti/cui-hooks';
export const Example = () => {
const {
set,
map,
push,
find,
clear,
value,
remove,
filter,
isEmpty,
includes,
findIndex,
} = useArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const isEmptyChecker = isEmpty();
const includesChecker = includes(5);
return (
<>
<span>{value}</span>
<button onClick={() => clear()}>Clear</button>
<span>
{isEmptyChecker ? 'Array list is empty' : 'Array list is NOT empty'}
</span>
<button onClick={() => push(100)}>Push</button>
<button onClick={() => set([99, 98, 97, 96, 95])}>Set</button>
<span>Does array includes 5 : {includesChecker ? 'True' : 'False'} </span>
<button onClick={() => remove(0)}>remove</button>
<span>{map((item) => item)}</span>
<span>{find((num) => num === 5) ? 'TRUE' : 'FALSE'}</span>
<span>{filter((num) => num > 7)}</span>
<span>{findIndex((num) => num === 9)}</span>
</>
);
};
export default Array;
Preview & Test​
Value returns given initial array.
The isEmpty() method checks whether given array is empty or not.
Array list is NOT emptyThe push() method adds one or more elements to the end of an array and returns the new length of the array.
Click to push a random number into array
Click to set array as [99,98,97,96,95]
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
Does array includes 5 : TrueThe remove() method removes array elements starting from given index. For this example it's given 0 as starting index.
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Mapped Array: ( 1 ) ( 2 ) ( 3 ) ( 4 ) ( 5 ) ( 6 ) ( 7 ) ( 8 ) ( 9 ) ( 10 )The find() method returns the first element in the provided array that satisfies the provided testing function.
Find 5: TRUEThe filter() method creates a new array with all elements that pass the test implemented by the provided function.
Print numbers greater than five : ( 8 ) ( 9 ) ( 10 )The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
The clear() method click to clears whole array list.