import { lape, connect } from 'lape'
const state = lape({
count: 0
})
const Component = () => {
const onClick = () => state.count += 1;
return <div onClick={onClick}>{state.count}</div>
}
export default connect(Component)
Not all state needs to be global.
useLape is a useState replacement that works exactly the same as the global lape state - Component will rerender if the state is mutated.
import { connect, useLape } from 'lape'
const Component = () => {
const state = useLape({
count: 1,
});
const onClick = () => state.count += 1;
return <div onClick={onClick}>{state.count}</div>
}
export default connect(Component)
Everything inside recordUndo will be recorded as a single action
Use undo and redo to go backwards and forwards in your action stack
It's possible to have multiple undo/redo stacks, all functions accept stackId. Not sending a stackId will use the "default" stack.
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>
</>
)
}
Global state
Lape is a helper library that allows using any object as state
lape(object) - wraps an object and tracks when the object is mutated
connect(Component) - wraps React Component to track which state was used in render. Rerenders the Component when the used state was mutated.