use-query-state

> React hook for sharing state via URL.

Installation

``bash
$ npm install @Kikobeats/use-query-state --save
`

Usage

$3

Just get it from window.location.search

`jsx
const [query, setQuery] = useQueryState()
`

$3

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

`jsx
const [query, setQuery] = useQueryState(ssrQuery)
`

$3

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

`jsx
const safeDecode = value => {
try {
return decodeURIComponent(value)
} catch (_) {
return value
}
}

const [query, setQuery] = useQueryState(undefined, parsedQuery =>
Object.entries(parsedQuery).reduce((acc, [key, value]) => {
acc[key] = safeDecode(value)
return acc
}, {})
)
`

Integration

$3

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:

`js
const withTM = require('next-transpile-modules')(['@kikobeats/use-query-state'])

const nextConfig = {}

module.exports = withTM(withOffline(nextConfig))
`

$3

`jsx
import 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