Use State History

import { UseStateHistoryDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useStateHistory);

Usage

The useStateHistory hook creates a state with history. It returns the current value, handlers to go back/forward, and a history object with all previous values and the current index.

Definition

The UseStateHistoryHandlers and UseStateHistoryValue interfaces are exported from the @mantine/hooks package.

interface UseStateHistoryHandlers<T> {
  set: (value: T) => void;
  back: (steps?: number) => void;
  forward: (steps?: number) => void;
  reset: () => void;
}

interface UseStateHistoryValue<T> {
  history: T[];
  current: number;
}

type UseStateHistoryReturnValue<T> = [
  T,
  UseStateHistoryHandlers<T>,
  UseStateHistoryValue<T>,
];

function useStateHistory<T>(initialValue: T): UseStateHistoryReturnValue<T>;

Exported types

The UseStateHistoryHandlers, UseStateHistoryReturnValue, and UseStateHistoryValue types are exported from @mantine/hooks;

import type { UseStateHistoryHandlers, UseStateHistoryReturnValue, UseStateHistoryValue } from '@mantine/hooks';