A collection of enhanced useState hooks for React.
npm install use-enhanced-state



> A collection of enhanced useState hooks for React.
- Installation
- Hooks
- useControlledState
- useListState
- useBoolState
- useLocalState
```
npm install --save use-enhanced-state
Used to sync local component state and incoming state from props. This is useful for creating controlled components, like a custom .
`jsx
import React from 'react';
import { useControlledState } from 'use-enhanced-state';
const Control = ({ value: valueProp }) => {
const [value, setValue] = useControlledState(valueProp);
return ;
};
`
##### useControlledState(initialState?: any, { initial?: any })
useControlledState has options as a second argument. initial from options can be used to set the initial value for the internal controlled state.
Used for a flat array.
`jsx
import React from 'react';
import { useListState } from 'use-enhanced-state';
const ListComponent = () => {
const [items, itemsFns] = useListState([{ id: 1 }, { id: 2 }]);
return (
#### Methods
There are a handful of convenient methods provided by the second argument of
useListState().#####
.add(data)_Alias:
.append()_Adds a new item to the array (at the end).
`js
const [items, itemsFns] = useListState([...]);itemsFns.add({ id: 'a' });
`#####
.find({ at: number, id: any })_Alias:
.get()_Finds an item from the array, using either an index value (
at) or an id.`js
const [items, itemsFns] = useListState([...]);itemsFns.find({ id: 'a' });
itemsFns.find({ at: 9 });
`#####
.has({ at: number, id: any })Checks to see if the array contains an item.
`js
const [items, itemsFns] = useListState([...]);itemsFns.has({ id: 'a' });
`#####
.indexOf({ id: any })Checks an index of an item based on an id.
`js
const [items, itemsFns] = useListState([...]);itemsFns.indexOf({ id: 'a' });
`#####
.insert({ at: number, item: any })Adds new data an a specific index.
`js
const [items, itemsFns] = useListState([...]);itemsFns.insert({at: 3, item: { id: 'a' }});
`#####
.move(source: number, destination: number)Moves an item from a previous index (
source) to a new index (destination).`js
const [items, itemsFns] = useListState([...]);itemsFns.move(3, 5);
`#####
.prepend(data)Adds a new item to the array (at the start).
`js
const [items, itemsFns] = useListState([...]);itemsFns.prepend({ id: 'a' });
`#####
.remove({ at: number, id: any })Removes an item from the array, given an index value (
at) or an id.
Alternatively, a filter match (function) can be provided.`js
const [items, itemsFns] = useListState([...]);itemsFns.remove({ id: 'a' });
// or
itemsFns.remove((item) => item.id === 'a');
`#####
.removeAll((item: any, index: number) => boolean)Removes all items from the array based on a filter match.
`js
const [items, itemsFns] = useListState([...]);itemsFns.removeAll((item) => item.value > 50);
`#####
.set(Array | Function)_Alias:
.setState()_The original React
setState callback from useState.`js
const [items, itemsFns] = useListState([...]);itemsFns.set([{ id: 'a' }]);
`#####
.update(Object)Updating an item based on an
id match.`js
const [items, itemsFns] = useListState([...]);itemsFns.update({ id: 'a', title: 'b' });
`$3
Used for a
boolean state.`jsx
import React from 'react';
import { useListState } from 'use-enhanced-state';const ListComponent = () => {
const [show, showData] = useBoolState(false);
return
{show ? 'Show' : 'Hide'};
};
`#### Methods
There are a handful of convenient methods provided by the second argument of
useBoolState().#####
.true()_Alias:
.truthy()_Sets the value to
true.`js
const [value, valueFns] = useBoolState(false);valueFns.true();
`#####
.false()_Alias:
.falsy()_Sets the value to
false.`js
const [value, valueFns] = useBoolState(true);valueFns.false();
`#####
.toggle()Toggles the value between
true and false.`js
const [value, valueFns] = useBoolState(true);valueFns.toggle();
`#####
.set(Array | Function)_Alias:
.setState()_The original React
setState callback from useState.`js
const [value, valueFns] = useBoolState(false);valueFns.set(true);
`$3
Used to read/write state to localStorage.
`jsx
import React from 'react';
import { useListState } from 'use-enhanced-state';const ListComponent = () => {
const [config, setConfig] = useLocalState('items', {...});
return (
{config.dark ? 'Dark' : 'Light'}
);
};
`##### useLocalState(key: string, state: any)
The
key` will be used as the localState key for your data.