use-sync-query-params

Sync React props/states to URL query params. Zero dependency.

Purposes

  • Initialize the URL query params with a default ones.
    • The default params can come from any source: redux, props, computed variables…
  • Update query params on demand

Usage examples

import useSyncQueryParams from 'use-sync-query-params'

export default function App(props) {
  const params = useSyncQueryParams({ foo: 'bar' })
  // Or
  const params = useSyncQueryParams({ foo: props.foo })
  // Or
  const foo = new URLSearchParams(window.location.search).get('foo')
  const params = useSyncQueryParams({ foo })

  return (
    <>
      <p>{params.getParam('foo')}</p>
      <p>{window.location.search}</p>
      <pre>{JSON.stringify(params.getAllParams())}</pre>
      <br/>
      <button onClick={() => params.setParam('foo', 'baz')}>Change bar to baz</button>
      <br/>
      <button onClick={() => params.setParam('foo', null)}>Clear query param<button>
    </>
  )
}

APIs

  1. useSyncQueryParams(defaultParams: { [x: string]: string | number | boolean | null | undefined }) => ({ getParam, getAllParams, setParam })

    Initial the hook with default params. Automatic URL query params synchronization will happen only once on mount.

    Changing the default params will not re-trigger the synchronization.

  2. getParam: (key: string) => string

    Get specific key from query params. Autosuggestion mapped to keys of the default params.

  3. getAllParams: () => Object

    Get all query params. The result contains all records with keys of the default params except those that were cleared.

  4. setParam: (key: string, value: string | number | boolean | null | undefined) => void

    Set a specific key with a value. Empty values (empty string, null, undefined) will be cleared.

GitHub

View Github