https://github.com/hypnosphi/qhistory

Wrap history with query support
https://github.com/hypnosphi/qhistory

history react-router

Last synced: 21 days ago
JSON representation

Wrap history with query support

• Host: GitHub
• URL: https://github.com/hypnosphi/qhistory
• Owner: Hypnosphi
• License: mit
• Created: 2017-02-11T04:53:42.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-07-29T18:39:59.000Z (over 4 years ago)
• Last Synced: 2024-10-19T05:07:02.241Z (25 days ago)
• Topics: history, react-router
• Language: JavaScript
• Size: 12.7 KB
• Stars: 44
• Watchers: 2
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# qhistory

Add query object support to [`history`](https://github.com/ReactTraining/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.

```js

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

```

#### `parse`

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

```js

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

```

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

* [`qs`](https://www.npmjs.com/package/qs)

* [`query-string`](https://www.npmjs.com/package/query-string)

* [`querystring`](https://www.npmjs.com/package/querystring)

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

```js

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.

```js

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((

  

    

  

), document.getElementById('root'))

```

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

```js

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 

  }

}

// usage

render((

  

    

  

), document.getElementbyId('root'))

```