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.

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHistoryTravel.json

A 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 | | | - | -- | | - | | 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 |

useGetState

Add a getter method to the return value of React.useState to get the latest value

useHover

A hook that tracks whether the element is being hovered.

On this page

Overview Installation Examples Basic usage Todo List Limit maximum history length API Params