How to use the react-use.useDebounce function in react-use

To help you get started, we’ve selected a few react-use 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 pubpub / pubpub / client / containers / Pub / PubDocument / PubHistory / PubHistory.js View on Github external
try {
					stickyRef.current.cleanup();
				} catch (_) {
					// This sometimes fails if the element's parent has been unmounted. That's okay.
				}
			}
		};
	}, []);

	useEffect(() => {
		if (value === undefined && currentKey) {
			setValue(currentKey);
		}
	}, [currentKey, value]);

	useDebounce(() => updateLocalData('history', { currentKey: value }), 100, [value]);

	const renderLabel = (step) => {
		const labelDateFormat = (date, withTime) =>
			dateFormat(date, 'mmm dd, yyyy' + (withTime ? ' HH:MM' : ''));
		const timestamp = timestamps[step];
		if (step === 0) {
			return labelDateFormat(pubData.createdAt);
		}
		if (step === latestKey) {
			return labelDateFormat(timestamp);
		}
		if (timestamp) {
			return labelDateFormat(timestamp);
		}
		return '...';
	};
github BoostIO / BoostNote.next / src / components / Storage / StorageEdit.tsx View on Github external
if (value === 0) {
          try {
            await db.removeStorage(storage.id)
            router.push('/app')
          } catch {
            pushMessage({
              title: t('general.networkError'),
              description: `An error occurred while deleting storage (id: ${storage.id})`
            })
          }
        }
      }
    })
  }, [storage, db, router, messageBox, pushMessage])

  useDebounce(
    () => {
      db.renameStorage(storage.id, name).catch(() => {
        pushMessage({
          title: t('general.networkError'),
          description: `An error occured while updating storage (id:${storage.id}}`
        })
      })
    },
    1000,
    [name]
  )

  return (
    <div>
      
        {t('storage.edit')}</div>
github BoostIO / BoostNote.next / src / components / PreferencesModal / EditorTab.tsx View on Github external
'editor.fontSize': parsedFontSize
        })
      }
    },
    500,
    [fontSize, setPreferences]
  )

  const [fontFamily, setFontFamily] = useState(preferences['editor.fontFamily'])
  const updateFontFamily: ChangeEventHandler = useCallback(
    event =&gt; {
      setFontFamily(event.target.value)
    },
    [setFontFamily]
  )
  useDebounce(
    () =&gt; {
      setPreferences({
        'editor.fontFamily': fontFamily
      })
    },
    500,
    [fontFamily, setPreferences]
  )

  const selectEditorIndentType: SelectChangeEventHandler = useCallback(
    event =&gt; {
      setPreferences({
        'editor.indentType': event.target.value as EditorIndentTypeOptions
      })
    },
    [setPreferences]