Skip to content

Hypnosphi/qhistory

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

qhistory

Add query object support to history library location objects.

You will need to supply stringify and parse methods.

stringify

A function that takes a query object and returns a search string.

stringify({ occupation: 'computer' }) // 'occupation=computer'

parse

A function that takes a search string and returns a query object.

parse('stopDownloading=true') // { stopDownloading: 'true' }

There are lots of different query string packages that you can choose from. Some popular ones include:

There may be subtle differences in the way that each parses and stringifies, so you will need to determine which supports the features that you want.

Installation

npm install --save qhistory

Usage

import { createBrowserHistory } from 'history'
import qhistory from 'qhistory'

import { stringify, parse } from 'qs'

const history = qhistory(
  createBrowserHistory({ /* history configuration options */ }),
  stringify,
  parse
)

Usage with React Router

This can be used with React Router v4 to add query string support to location objects. If a location object has both a search string and a query object, the search string's value will be overwritten by the stringified query object.

import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import qhistory from 'qhistory'

import { stringify, parse } from 'qs'

const history = qhistory(
  createBrowserHistory({ /* history configuration options */ }),
  stringify,
  parse
)

render((
  <Router history={history}>
    <App />
  </Router>
), document.getElementById('root'))

If you're using React Router 4's BrowserRouter you can incorporate qhistory like this:

class QueryRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    forceRefresh: PropTypes.bool,
    getUserConfirmation: PropTypes.func,
    keyLength: PropTypes.number,
    children: PropTypes.node,
    stringify: PropTypes.func,
    parse: PropTypes.func,
  }

  history = qhistory(
    createBrowserHistory(this.props),
    this.props.stringify,
    this.props.parse
  )

  render() {
    return <Router history={this.history} children={this.props.children} />
  }
}

// usage
render((
  <QueryRouter stringify={stringify} parse={parse}>
    <App />
  </QueryRouter>
), document.getElementbyId('root'))