use-query-state

React hook for sharing state via URL.

Installation

1$ npm install @Kikobeats/use-query-state --save

Usage

Get query state

Just get it from window.location.search

1const [query, setQuery] = useQueryState()

Pass a initial query state

This is especially useful for Server-side Rendering (SSR), when the initial query state will depends on the incoming request.

1const [query, setQuery] = useQueryState(ssrQuery)

Transform the query state

Sometimes you want to modify the window.location.search for anything you need for.

1const safeDecode = value => {
2  try {
3    return decodeURIComponent(value)
4  } catch (_) {
5    return value
6  }
7}
8
9const [query, setQuery] = useQueryState(undefined, parsedQuery =>
10  Object.entries(parsedQuery).reduce((acc, [key, value]) => {
11    acc[key] = safeDecode(value)
12    return acc
13  }, {})
14)

Integration

for Next.js

Since Next.js doesn't support ES Modules yet, you need to install next-transpile-modules in order to make possible use the hook on Next.js:

1const withTM = require('next-transpile-modules')(['@kikobeats/use-query-state'])
2
3const nextConfig = {}
4
5module.exports = withTM(withOffline(nextConfig))

for Gatsby

1import useQueryState from '@kikobeats/use-query-state/gatsby'

License

use-query-state © Kiko Beats, released under the MIT License.
Authored and maintained by Kiko Beats with help from contributors.

kikobeats.com · GitHub Kiko Beats · Twitter @Kikobeats