Have ideas to improve npm?Join in the discussion! »

    qhistory
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/qhistory package

    1.1.0 • Public • Published

    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'))

    Install

    npm i qhistory

    DownloadsWeekly Downloads

    13,076

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar