How to use use-undo - 4 common examples
To help you get started, we’ve selected a few use-undo examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
PacktPublishing / Learn-React-Hooks / Chapter08 / chapter8_5 / src / post / CreatePost.js View on Github 
export default function CreatePost () {
const { state, dispatch } = useContext(StateContext)
const { user } = state
const { value: title, bindToInput: bindTitle } = useInput('')
const [ content, setInput ] = useState('')
const [ undoContent, {
set: setContent,
undo,
redo,
canUndo,
canRedo
} ] = useUndo('')
const [ setDebounce, cancelDebounce ] = useDebouncedCallback(
(value) => {
setContent(value)
},
200
)
useEffect(() => {
cancelDebounce()
setInput(undoContent.present)
}, [undoContent])
const [ post, createPost ] = useResource(({ title, content, author }) => ({
url: '/posts',
method: 'post',
data: { title, content, author }export default function useDebouncedUndo (timeout = 200) {
const [ content, setInput ] = useState('')
const [ undoContent, { set: setContent, ...undoRest } ] = useUndo('')
const [ setDebounce, cancelDebounce ] = useDebouncedCallback(
(value) => {
setContent(value)
},
timeout
)
useEffect(() => {
cancelDebounce()
setInput(undoContent.present)
}, [cancelDebounce, undoContent])
const setter = useCallback(function setterFn (value) {
setInput(value)
setDebounce(value)
}, [ setInput, setDebounce ])] as [Date, Date],
)
.sort(([start], [end]) => compareAsc(start, end)),
[weekStart, originDate],
);
const [
scheduleState,
{
set: setSchedule,
reset: resetSchedule,
undo: undoSchedule,
redo: redoSchedule,
canUndo: canUndoSchedule,
canRedo: canRedoSchedule,
},
] = useUndo(defaultAdjustedSchedule);
useMousetrap(
'ctrl+z',
() => {
if (!canUndoSchedule) {
return;
}
undoSchedule();
},
document,
);
useMousetrap(
'ctrl+shift+z',
() => {export default function CreatePost () {
const { state, dispatch } = useContext(StateContext)
const { user } = state
const { value: title, bindToInput: bindTitle } = useInput('')
const [ content, setInput ] = useState('')
const [ undoContent, {
set: setContent,
undo,
redo,
canUndo,
canRedo
} ] = useUndo('')
const [ setDebounce, cancelDebounce ] = useDebouncedCallback(
(value) => {
setContent(value)
},
200
)
useEffect(() => {
cancelDebounce()
setInput(undoContent.present)
}, [cancelDebounce, undoContent])
const [ post, createPost ] = useResource(({ title, content, author }) => ({
url: '/posts',
method: 'post',
data: { title, content, author }use-undo
undo/redo functionality with React Hooks
