React custom hooks for handling structure(array) with normal state or recoil state

React Structured State

React custom hooks for handling structure(array) with normal state or recoil state.

Install

$ npm install react-structured-state

How to use

Define

with normal(react hooks) state

import { useArray } from 'react-structured-state';

const App = (): JSX.Element => {
  const [arr, actionArr] = useArray<number>([1, 2, 3]);
  return (
    ...
  )
}

with recoil state

import { atom } from 'recoil';
import { useRecoilArray } from 'react-structured-state';

export const arrayState = atom({
  key: 'arrayState',
  default: [1, 2, 3],
});

const App = (): JSX.Element => {
  const [arr, actionArr] = useRecoilArray<number>(arrayState);
  return (
    ...
  )
}

Use Case

push 10 to back

// Before
setArr((oldarr) => [...oldarr, 10]);

// After
actionArr.pushBack(10);

double all elements

// Before
setArr((oldarr) => oldarr.map((e) => e * 2));

// After
actionArr.map((e) => e * 2);

Example

useArray<T> / useRecoilArray<T> return two values.

First value is Array<T> used for view array elements.

Second value is object of action like array methods (map, filter, ...). This is used for change value.

API

method	action	args	args(optional)	default
setState	basic setState	T[]
pushBack	add value(s) on back	val: T	... vals: T[]	none
pushFront	add value(s) on front	val: T,	...vals: T[]	none
insert	insert value	idx: number, val: T	...vals: T[]	none
popBack	remove value(s) on back		count: number	1
popFront	remove value(s) on front		count: number	1
concatBack	add elements of array on back	vals: T[]
concatFront	add elements of array on front	vals: T[]
sort	sort with callback		fn: (vals: T[]) => T[]	(a, b) => a - b
reverse	reverse elements
slice	update values with slice()		start:number, end:number	0, length
splice	update values with splice()	start:number	deleteCount: number, ...vals: T[]	none, none
filter	update values with filter()	fn:(vals: T[]) => boolean
map	update values with map()	fn:(vals: T[]) => T[]
fill	update values with fill()	val: T	start: number, end:number	0, length
chain	update vlues with array method chain	fn: (vals:T[]) => T[]
set	set value on specified index	idx:number, val: T
erase	erase element by specified value	val:T
clear	clear all elements