queryzz.js

queryzz - a lightweight JS library for manipulating URL query parameters. Get, set, and format queries easily.

Quick start

Install

npm i queryzz

Usage

import { getQuery } from 'queryzz'

getQuery()

Methods

formatQuery

Format query string from an object.

const query = { value: 'test', field: ['hi', 'hello'] }

formatQuery(query)
// => value=test&field=hi&field=hello

const query = { value: 'https://google.com' }

formatQuery(query, true)
// => value=https%3A%2F%2Fgoogle.com

const query = { value: 'https://google.com' }

formatQuery(query, false)
// => value=https://google.com

getQuery

Get query from an url.

// URL: /?value=test&field=hi&field=hello

getQuery()
// => { value: 'test', field: ['hi', 'hello'] }

getQuery('value=test&field=hi&field=hello')

// => { value: 'test', field: ['hi', 'hello'] }

// URL: /?value=test&field=hi

getQuery({ arrays: ['value'] })

// => { value: ['test'], field: 'hi' }

// URL: /?value=test&field=hi&value=123&test=true

getQuery()

// => { value: ['test', 123], field: 'hi', test: true }

getQuery({
  source: 'value=test&field=hi&value=123&test=true',
  parse: false
})

// => { value: ['test', '123'], field: 'hi', test: 'true' }

setQuery

Set query to the url.

setQuery({ test: 'value' })

// => URL: /?test=value

setQuery({ test: ['12', '34'] })

// => URL: /?test=12&test=34

// /?test=value&field=test

setQuery({ test: 'field' }, { saveOld: true })

// => URL: /?test=value&test=field&field=test

// URL: /?test=value#someHash

setQuery({ test: 'value' }, { saveHash: false })

// => URL: /?test=value

React

useQuery

const [search, setSearch] = useQuery('search')

setSearch('test')

// => URL: /?search=test

// URL: /?search=test

const [search, setSearch] = useQuery('search', { array: true })

console.log(search)
// => ['test']

setSearch(['test', 'test2'])

// => URL: /?search=test&search=test2

// URL: /?page=1

const [page, setPage] = useQuery('page', { parse: false })

console.log(page)
// => '1'

Vue

useQuery

const search = useQuery('search')

search.value = 'test'

// => URL: /?search=test

// URL: /?search=test

const search = useQuery('search', { array: true })

console.log(search.value)
// => ['test']

search.value = ['test', 'test2']

// => URL: /?search=test&search=test2

// URL: /?page=1

const page = useQuery('page', { parse: false })

console.log(page.value)
// => '1'

Author

© letstri, released under the MIT license.