undo / redo

Lape supports undo/redo out of the box.

Record actions with recordUndo. it accepts a callback that is called immediately. You can mix local and global state inside one action.

import { recordUndo, undo, redo } from 'lape'
import state from './state'

const Component = () => {
  const onClick = () => {
    recordUndo(() => {
      state.count += 1;
    })
  }
  
  return (
    <>
      <div onClick={() => undo()}>undo</div>
      <div onClick={() => redo()}>redo</div>
      <div onClick={onClick}>{state.count}</div>
    </>
  )
}

Calling undo and then triggering recordUndo will start creating a new history from that point, so redo stack will be empty until you use undo again.

Stacks

Every undo function accepts a stackId, which if you don't send anything is 'default'. This allows you to have multiple undo redo users without one making changes to the other.

import { recordUndo, undo, redo } from 'lape'
import state from './state'

const COUNT = 'COUNT'
const ARRAY = 'ARRAY'


const Component = () => {

  const onClickCount = () => {
    recordUndo(() => {
      state.count += 1;
    }, COUNT)
  }

  const onClickArray = () => {
    recordUndo(() => {
      state.array[0].amount += 1;
    }, ARRAY)
  }
  
  return (
    <>
      <div onClick={() => undo(COUNT)}>undo</div>
      <div onClick={() => redo(COUNT)}>redo</div>
      <div onClick={onClickCount}>{state.count}</div>
      <div onClick={onClickArray}>{state.array[0].amount}</div>
    </>
  )
}

Other

There are additional functions exposed that might be useful like canUndo, canRedo and resetUndoStack.

← useLapeEffectignoreState →