React Structured State

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

Install

$ npm install react-structured-state
View Demo View Github

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