react-query-string-to-props v1.0.9

react-query-string-to-props

Mapping query string from url to Component props seamlessly. react-query-string-to-props

Installation

Use npm

npm install react-query-string-to-props

Use yarn

yarn add react-query-string-to-props

Usage

ES6 Class Component

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 (
      <div>
        <span>{searchStr}</span>
        <input onChange={this.handleChange} />
      </div>
    )
  }
}

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

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 (
    <div>
      <span>{searchStr}</span>
      <input onChange={handleChange} />
    </div>
  )
}

const config = {
  history: createBrowserHistory(),
  queryPropsConfig: {
    searchStr: QueryPropTypes.string
  }
}

export default queryToPropsHOC(Searcher, config)

Multiple Components in one page

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 <div>{searchStr1}</div>
  }
}

const FunctionalSearcher = (props) => {
  const { searchStr2 } = props
  return <div>{searchStr2}</div>
}

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 <React.Fragment>
      <SearcherQueryToStateComp />
      <FunctionalSearcherQueryToStateComp />
    </React.Fragment>
  }
}

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.

const { updateQueryState } = this.props
updateQueryState({ searchStr: event.target.value }, (queryObj) => {
  // do something
  console.log(queryObj.searchStr)
})

Configuration

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

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