superquery v1.0.2

superquery

The most convenient possible way to work with query strings in react-router v4. And it works with any query string library you choose!

Usage

npm install --save superquery

import createQuery from 'superquery'

// choose parse and stringify functions from whatever library you want and pass them in
import {parse, stringify} from 'qs'
const Query = createQuery({parse, stringify})

Query(...) takes as many search strings or objects you want and merges them together

const query = Query('strings=work', {objects: 'work too'}, 'arguments=are%20unlimited')
// query.strings === 'work'
// query.objects === 'work too'
// query.arguments === 'are unlimited'

Query(...).toString() returns the query string, so it works inside template strings:

const newURL = `http://localhost?${Query('strings=work', {objects: 'work too'}, 'arguments=are%20unlimited')}`
// http://localhost?strings=work&objects=work%20too&arguments=are%20unlimited

So Query is super convenient for merging extra values into the existing query:

const Results = ({match, location}) => (
  <div>
    <table>...</table>
    ...
    <Link to={`${match.url}?${Query(location.search, {page: 1})}`}>
      Page 1
    </Link>
    <Link to={`${match.url}?${Query(location.search, {page: 2})}`}>
      Page 2
    </Link>
    ...
  </div>
)