0.1.2 • Published 5 years ago
use-history-reducer v0.1.2
useHistoryReducer
This experimental hook provides a light wrapper over useReducer
which provides undo/redo, forking, and checkpoints. It's built on top of Immer, so you also get the added benefits it provides.
Basic example
import React from "react";
import useHistoryReducer from "use-history-reducer";
function reducer(state, action) {
if (action.type === "increment") {
state.count += 1;
}
}
function App() {
const [state, changes, dispatch] = useHistoryReducer(reducer, { count: 1 });
return (
<div>
<main>{state.count}</main>
<button onClick={() => dispatch({ type: "increment" })}>++</button>
<button
disabled={changes.counts.undos === 0}
onClick={() => changes.undo()}
>
Undo
</button>
<button
disabled={changes.counts.redos === 0}
onClick={() => changes.redo()}
>
Redo
</button>
</div>
);
}
Forking
Forking allows you to break off from the main set of changes temporarily, and either commit all the changes that happen during the fork at once (and in one changeset), or revert them altogether. One use case for this is an input that may change the state many times, and you want only the final value to be recorded.
import React from "react";
import useHistoryReducer from "use-history-reducer";
function reducer(state, action) {
if (action.type === "SET_COUNT") {
state.count = action.payload;
}
}
function App() {
const [state, changes, dispatch] = useHistoryReducer(reducer, { count: 1 });
return (
<div>
<main>{state.count}</main>
<input
type="range"
min="1"
max="100"
value={state.count}
onMouseDown={() => changes.fork()}
onMouseUp={() => changes.commit()}
onChange={e => dispatch({ type: "SET_COUNT", payload: e.target.value })}
/>
<button
disabled={changes.counts.undos === 0}
onClick={() => changes.undo()}
>
Undo
</button>
<button
disabled={changes.counts.redos === 0}
onClick={() => changes.redo()}
>
Redo
</button>
</div>
);
}
Checkpoints
By using checkpoints, you can get the the changes made since the last checkpoint. This makes it easy to track unsaved changes you haven't sent to your backend or whatever persistence layer you are using.
import React from "react";
import useHistoryReducer from "use-history-reducer";
function reducer(state, action) {
if (action.type === "increment") {
state.count += 1;
}
}
function App() {
const [state, changes, dispatch] = useHistoryReducer(reducer, { count: 1 });
return (
<div>
<main>{state.count}</main>
<button onClick={() => dispatch({ type: "increment" })}>++</button>
<button
disabled={changes.counts.unchecked === 0}
onClick={() => {
const changes = changes.checkpoint();
// do something with the patches.
}}
>
Save
</button>
</div>
);
}