rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
51 lines • 1.68 kB
TypeScript
type UpdateValueOptions = {
overwriteLastEntry?: boolean;
};
type UseTimeTravelStateControls<T> = {
backLength: number;
forwardLength: number;
go: (step: number) => void;
back: (step?: number) => void;
forward: (step?: number) => void;
reset: (newInitialValue?: T) => void;
undo: (step?: number) => void;
redo: (step?: number) => void;
canUndo: boolean;
canRedo: boolean;
};
type UpdateValue<T> = (val: T | ((prevValue: T) => T), options?: UpdateValueOptions) => void;
type UseTimeTravelStateReturnValue<T> = [
value: T,
setValue: UpdateValue<T>,
controls: UseTimeTravelStateControls<T>
];
/**
* useTimeTravelState
* @description A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
* @see {@link https://rooks.vercel.app/docs/hooks/useTimeTravelState}
* @param initialValue The initial value of the state.
* @returns {UseTimeTravelStateReturnValue}
* @example
* const [value, setValue, controls] = useTimeTravelState(0);
* setValue(1);
* setValue(2);
* setValue(3);
* controls.back(); // value === 2
* controls.back(); // value === 1
* controls.forward(); // value === 2
* controls.forward(); // value === 3
* controls.reset(); // value === 0
* controls.reset(5); // value === 5
* controls.back(2); // value === 3
*
* setValue(1);
* setValue(2);
* setValue(6, { overwriteLastEntry: true });
* setValue(7, { overwriteLastEntry: true });
*
* controls.back(2); // value === 1
*
*/
declare function useTimeTravelState<T>(initialValue: T): UseTimeTravelStateReturnValue<T>;
export { useTimeTravelState };
//# sourceMappingURL=useTimeTravelState.d.ts.map