react-query-to-state v0.0.3

react-query-to-state

Mapping query string from the path to Component state seamlessly.

Installation

Use npm

npm install react-query-to-state

Use yarn

yarn add react-query-to-state

Usage

ES6 Class Component

import React from 'react'
import queryToStateHOC from 'react-query-to-state'
import { createBrowserHistory } from 'history'

class Searcher extends React.Component {
  handleChange = (event) => {
    const { updateQueryState } = this.props
    updateQueryState({ searchStr: event.target.value })
  }

  render () {
    const { query } = this.props
    const { searchStr } = query

    return (
      <div>
        <span>{searchStr}</span>
        <input onChange={this.handleChange} />
      </div>
    )
  }
}

const config = {
  history: createBrowserHistory(),  // optional
  initState: {
    searchStr: 'abcde'
  },
  validatorMap: {
    searchStr: [
      {
        type: 'regexp',
        value: /^abc/i
      }
    ]
  },
  isReplace: true
}

export default queryToStateHOC(Searcher, config)

Functional Component

import React from 'react'
import queryToStateHOC from 'react-query-to-state'

const Searcher = (props) => {
  const handleChange = (event) => {
    const { updateQueryState } = props
    updateQueryState({ searchStr: event.target.value })
  }

  const { query } = props
  const { searchStr } = query

  return (
    <div>
      <span>{searchStr}</span>
      <input onChange={handleChange} />
    </div>
  )
}

const config = {
  initState: {
    searchStr: ''
  }
}

export default queryToStateHOC(Searcher, config)

Multiple Components in one page

import React from 'react'
import queryToStateHOC from 'react-query-to-state'

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 = {
  initState: {
    searchStr1: 'str1'
  },
  validatorMap: {
    searchStr1: [
      {
        type: 'range',
        value: ['aaa', 'bbb']
      }
    ]
  }
}

const config2 = {
  initState: {
    searchStr2: 'str2'
  },
  validatorMap: {
    searchStr2: [
      {
        type: 'function',
        value: (val) => {
          return val.startsWith('test')
        }
      }
    ]
  }
}

const SearcherQueryToStateComp = queryToStateHOC(Searcher, config1)
const FunctionalSearcherQueryToStateComp = queryToStateHOC(FunctionalSearcher, config2)

export default class App extends React.Component {
  render () {
    return <React.Fragment>
      <SearcherQueryToStateComp />
      <FunctionalSearcherQueryToStateComp />
    </React.Fragment>
  }
}

Configuration

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: 'range',
      value: ['aa', 'bb', 'cc']
    }
  ],
  key2: [
    {
      type: 'regexp',
      value: /^test/i
    },
    {
      type: 'function',
      value: val => {
        return val.endsWith('abc')
      }
    }
  ]
}