react-state-hooks
v1.0.2
Published
Collection of hooks to manage state.
Downloads
74
Maintainers
Readme
Hooks
useAsyncState
— manage a promise with returning value.useDependentState
— manage a state with dependencies.useHistoryState
— manage a state, by keeping their history.useListState
— manage an array, providing functions to manipulate it.useNumberState
— manage a numeric state.useObjectState
— manage an object state.usePropState
— manage a component prop as state, synchronizing the prop value with the state.useStoreState
— manage a global application state.useToggleState
— manage a boolean state.
useAsyncState
// useAsyncState<T>(getter: () => Promise<T>)
// Example:
const userId = 1;
const [user, setUser, { error, isPending, revalidate }] = useAsyncState(getUser, [userId])
async function getUser() {
return {
id: userId,
name: 'Richard',
};
}
// Re-run getter
revalidate()
useDependentState
// useDependentState<T>(setter: (current?: T) => T, deps: any[])
// Example:
const { user } = useAuth();
const [value, setValue] = useDependentState(() => {
return {
userId: user.id,
page: 1,
}
}, [user]);
// Manual change state
setValue((current) => {
return {
...current,
page: 2
}
});
useHistoryState
// useHistoryState<T>(initialState?: T, length: number = 10)
// Example:
const [value, setValue, { history, rollback }] = useHistoryState(0)
// Rollback
setValue(2) // value is now 2
rollback() // value is now 0
useListState
// useListState<T>(initialState?: T[])
// Example:
const [list, { set, push, insert, remove, update, clear, sort, filter }] = useListState({ name: 'Richard' })
// Reset
set([1, 2])
// Add
push(3, 4, 5, 6)
// Insert at index
insert(0, 'Hello')
// Remove
remove(0) // by index
remove((item) => item.id === 5) // by handler
// Update
update(0, { name: 'Richard' }) // by index
update((item) => item.id === 5, { name: 'Richard' }) // by handler
// Clear
clear()
// Sort
sort()
sort((a, b) => a.age - b.age)
// Filter
filter((item) => item.age > 21)
useNumberState
// useNumberState(initialState?: number, options?: { min?: number, max?: number, step?: number })
// Example:
const [number, setNumber, { inc, dec }] = useNumberState(0)
// Increment
inc(10)
// Decrement
dec(10)
// Options
const [...] = useNumberState(0, { min: 2, max: 10, step: 2 })
useObjectState
// useObjectState<T>(initialState?: T)
// Example:
const [obj, updateObj, resetObj] = useObjectState({ name: 'Richard' })
// Update
updateObj({ age: 21 });
// Reset
resetObj({});
usePropState
// usePropState<T>(prop: T | undefined, initialState?: T | (() => T))
// Example:
const [name, setName] = usePropState(props.name, 'Richard')
useStoreState
// useStoreState<T>(key: string, initialState?: T | (() => T))
// Example:
const [name, setName] = useStoreState('user.name', 'Richard')
useToggleState
// useToggleState(initialState?: boolean)
// Example:
const [isVisible, toggleIsVisible] = useToggleState(false)