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.

github PacktPublishing / Learn-React-Hooks / Chapter08 / chapter8_5 / src / post / CreatePost.js View on Github external
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 }
github PacktPublishing / Learn-React-Hooks / Chapter10 / chapter10_2 / src / hooks / useDebouncedUndo.js View on Github external
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 ])
github remotelock / react-week-scheduler / demo / index.tsx View on Github external
] 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',
    () => {
github PacktPublishing / Learn-React-Hooks / Chapter09 / chapter9_2 / src / post / CreatePost.js View on Github external
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

MIT
Latest version published 2 years ago

Package Health Score

48 / 100
Full package analysis

Popular use-undo functions

Similar packages