useQueryValue composition to make working with query values that are not params just as easy

[pleek91]

Description

Query params are useful for route matching and declaring known route state. But sometimes the query state cannot be known ahead of time, is dynamic, or for other reasons cannot be declared on the route.

useQueryValue aims to make working with query values that are not params as feature rich as params themselves.

Working with simple values

const { value } = useQueryValue('foo')
//           ?^ Ref<string | null>

Working with arrays

const { values } = useQueryValue('foo')
//           ?^ Ref<string[]>

Using params

const { value, values } = useQueryValue('foo', Number)

value // Ref<number | null>

values // Ref<number[]>

A remove callback is also returned to make deleting query keys simple

const { value, remove } = useQueryValue('foo')

value.value = 'bar'

// ?foo=bar

remove()

// query is empty

[netlify]

✅ Deploy Preview for kitbag-router ready!

Name	Link
🔨 Latest commit	5434bcc
🔍 Latest deploy log	https://app.netlify.com/sites/kitbag-router/deploys/673bff98f45a92000836b842
😎 Deploy Preview	https://deploy-preview-314--kitbag-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stackoverfloweth]

love this! 😍