@scaleway/use-query-params

A tiny hooks to handle use-query-params

Install

``bash
$ pnpm add @scaleway/use-query-params react-router-dom
`

Usage

`js
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import useQueryParams from '@scaleway/use-query-params'

const App = () => {
const { queryParams, setQueryParams } = useQueryParams()
const { user } = queryParams
const setUser = () => setQueryParams({ user: 'John' })
// ?user=John

return (
<>


User: {user}

Set User John

)
}

render(


,
document.getElementById('react-root'),
)
`

$3

Merge current query params with the new ones passed in parameters.

`js
// In this exemple we assume that we have an URL that include : ?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'

const Component = () => {
const { queryParams, setQueryParams } = useQueryParams()
const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
const setUser = () => setQueryParams({ user: 'John' }) // user will be "John" and company will be "Scaleway"
// ?company=Scaleway&user=John

return (
<>

User: {user}

Company: {company}

Set User John

)
}
``

$3

Erase current query params and replace by the new ones passed in parameters.

`js
// In this exemple we assume that we have an URL that include : ?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'

const Component = () => {
const { queryParams, replaceQueryParams } = useQueryParams()
const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
const setUser = () => replaceQueryParams({ user: 'John' }) // user will be "John" and company will be undefined
// ?user=John

return (
<>

User: {user}

Company: {company}

Set User John

)
}
``

$3

To avoid mutating history

`js
// In this exemple we assume that we have an URL that include : ?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'

const Component = () => {
const { queryParams, replaceQueryParams } = useQueryParams()
const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
const setUser = () => replaceQueryParams({ user: 'John' }, { push: true }) // user will be "John" and company will be undefined
// ?user=John

return (
<>

User: {user}

Company: {company}

Set User John

)
}
```