useHistoryTravel
A hook to manage state change history. It provides encapsulation methods to travel through the history.
Overview
A hook to manage state change history. It provides encapsulation methods to travel through the history.
Installation
Open inpnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.jsonnpx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.jsonyarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.jsonbun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.jsonA hook to manage state change history. It provides encapsulation methods to travel through the history.
Examples
Basic usage
Todo List
Limit maximum history length
API
const {
value,
setValue,
backLength,
forwardLength,
go,
back,
forward
} = useHistoryTravel<T>(initialValue?: T, maxLength: number = 0 );Params
| Property | Description | Type | Default |
|---|---|---|---|
| initialValue | Optional initial value | T | - |
| maxLength | Optional limit the maximum length of history records. If the maximum length is exceeded, the first record will be deleted | number | 0 unlimited |
Result
| Property | Description | Type |
|---|---|---|
| value | Current value | T |
| setValue | Set value | (value: T) => void |
| backLength | The length of backward history | number |
| forwardLength | The length of forward history | number |
| go | Move between the history, move backward on step < 0，and move forward on step > 0 | (step: number) => void |
| back | Move one step backward | () => void |
| foward | Move one step forward | () => void |
| reset | Reset history to initial value by default or provide a new initial value. | (newInitialValue?: T) => void |