https://github.com/space-fe/react-query-string-to-props
Mapping query string from url to Component props seamlessly.
https://github.com/space-fe/react-query-string-to-props
array enum mapping props querystring react to url
Last synced: about 1 year ago
JSON representation
Mapping query string from url to Component props seamlessly.
- Host: GitHub
- URL: https://github.com/space-fe/react-query-string-to-props
- Owner: space-fe
- License: mit
- Created: 2019-06-05T03:34:00.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-07T09:28:06.000Z (over 6 years ago)
- Last Synced: 2024-10-15T05:30:34.198Z (over 1 year ago)
- Topics: array, enum, mapping, props, querystring, react, to, url
- Language: JavaScript
- Homepage: https://space-fe.github.io/query2props
- Size: 304 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-query-string-to-props
[](https://travis-ci.org/space-fe/react-query-string-to-props)
Mapping query string from url to Component props seamlessly. [react-query-string-to-props](https://space-fe.github.io/query2props)
## Installation
Use `npm`
```shell
npm install react-query-string-to-props
```
Use `yarn`
```shell
yarn add react-query-string-to-props
```
## Usage
### ES6 Class Component
```javascript
import React from 'react'
import queryToPropsHOC, { QueryPropTypes, ValidateTypes } from 'react-query-string-to-props'
import { createBrowserHistory } from 'history'
class Searcher extends React.Component {
handleChange = (event) => {
const { updateQueryState } = this.props
updateQueryState({ searchStr: event.target.value }, queryObj => {
console.log(queryObj.searchStr)
})
}
render () {
const { searchStr } = this.props
return (
{searchStr}
)
}
}
const config = {
history: createBrowserHistory(),
queryPropsConfig: {
searchStr: QueryPropTypes.string
},
defaultQueryProps: {
searchStr: 'abcde'
},
validatorMap: {
searchStr: [
{
type: ValidateTypes.regexp,
value: /^abc/i
}
]
},
replaceRouteWhenChange: true,
mapDefaultQueryPropsToUrlWhenMounted: true
}
export default queryToPropsHOC(Searcher, config)
```
### Functional Component
```javascript
import React from 'react'
import { createBrowserHistory } from 'history'
import queryToPropsHOC, { QueryPropTypes, ValidateTypes } from 'react-query-string-to-props'
const Searcher = (props) => {
const handleChange = (event) => {
const { updateQueryState } = props
updateQueryState({ searchStr: event.target.value })
}
const { searchStr } = props
return (
{searchStr}
)
}
const config = {
history: createBrowserHistory(),
queryPropsConfig: {
searchStr: QueryPropTypes.string
}
}
export default queryToPropsHOC(Searcher, config)
```
### Multiple Components in one page
```javascript
import React from 'react'
import { createBrowserHistory } from 'history'
import queryToPropsHOC, { QueryPropTypes, ValidateTypes } from 'react-query-string-to-props'
const history = createBrowserHistory(),
class Searcher extends React.Component {
render () {
const { searchStr1 } = this.props
return
{searchStr1}
}
}
const FunctionalSearcher = (props) => {
const { searchStr2 } = props
return
{searchStr2}
}
const config1 = {
history,
queryPropsConfig: {
searchStr1: QueryPropTypes.string
},
defaultQueryProps: {
searchStr1: 'str1'
},
validatorMap: {
searchStr1: [
{
type: ValidateTypes.range,
value: ['aaa', 'bbb']
}
]
}
}
const config2 = {
history,
queryPropsConfig: {
searchStr2: QueryPropTypes.string
},
defaultQueryProps: {
searchStr2: 'str2'
},
validatorMap: {
searchStr2: [
{
type: ValidateTypes.function,
value: (val) => {
return val.startsWith('test')
}
}
]
}
}
const SearcherQueryToStateComp = queryToPropsHOC(Searcher, config1)
const FunctionalSearcherQueryToStateComp = queryToPropsHOC(FunctionalSearcher, config2)
export default class App extends React.Component {
render () {
return
}
}
```
## updateQueryState()
After wrapping the `queryToPropsHOC`, the decorated Component will have a function property `updateQueryState`.
### updateQueryState parameters
- First parameter: new query key-value to be updated.
- Second paramter: callback function with a new query object parameter.
```javascript
const { updateQueryState } = this.props
updateQueryState({ searchStr: event.target.value }, (queryObj) => {
// do something
console.log(queryObj.searchStr)
})
```
## Configuration
| Name | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `history` | `object` | | `Required`. History object, see [history](https://github.com/ReactTraining/history) for more information. |
| `replaceRouteWhenChange` | `boolean` | `true` | `Optional`. If `true`, history.replace() will be called, or history.push() will be called when query is updated by Component. |
| `mapDefaultQueryPropsToUrlWhenMounted` | `boolean` | `false` | `Optional`. If `true`, default query props will be mapped to url when Component mounted. |
| `queryPropsConfig` | `object` | | Only properties declared in the queryPropTypes object will be mapped from the path to Component props, and the declared types will be used to decode the query string to Component props. |
| `defaultQueryProps` | `object` | | Default query props. |
| `validatorMap` | `object` | | `Optional`. ValidatorMap is a dictionary of properties validators. The key is a property name, and the value is an array of validator for this property. |
### queryPropsConfig
The value of each key in `queryPropsConfig` can be a QueryPropType or a function.
#### QueryPropTypes
- number
- string
- boolean
- array
- numericArray
### ValidatorMap
ValidatorMap is a dictionary of properties validators. The key is a property, and the value is an array of validator for this property.
`ValidateTypes`:
- range
- regexp
- function
```javascript
const validatorMap = {
key1: [
{
type: ValidateTypes.range,
value: ['aa', 'bb', 'cc']
}
],
key2: [
{
type: ValidateTypes.regexp,
value: /^test/i
},
{
type: ValidateTypes.function,
value: val => {
return val.endsWith('abc')
}
}
]
}
```