react-router-query-params
Set query parameters with a schema for react-router.
Install
npm install --save react-router-query-params
Peer dependencies
- react
- react-router v. ^4.0.0 or ^5.0.0
- react-router-dom v. ^4.0.0 or ^5.0.0
Example
import withQueryParams from 'react-router-query-params';... const ExampleComponent = queryParams setQueryParams = <div> <div> queryParams: JSON </div> <button => Set query param example </button> </div>; const ConnectedComponent = ExampleComponent;
API
Props
-
queryParams
(object): All current query parameters as key-value pairs in an object. -
setQueryParams
(function): Set one or more query parameters.
thisprops
HoC
The library exports withQueryParams
higher order component as default. The HoC takes a configuration object as the first argument, and has the following options:
-
stripUnknownKeys
(boolean)- if
true
, removes keys from query parameters that are not configured withkeys
- default: false
- if
-
keys
(object)- example:keys:example:default: 'default-value'true
- example:
Key configuration object
Key object is used to create a configuration for the query parameters that are intended to be used. Every key is configured with the following properties:
-
default
(any): Define the default value for the query parameter. If query parameter valiation fails or it is undefined, the HoC automatically sets the query parameter to this value. Examples:default: 'example'
: sets 'example' as default valuedefault: (value, props) => props.defaultParam'
: setsdefaultParam
from the component props as default valuedefault: undefined
: do not set query parameter at all by default
-
validate
(function): Validate the query parameter and revert to default value if validation does not pass. Examples:validate: () => true
: allow any aluevalidate: value => !!value && value.length > 2
: allow any value with more than two charactersvalidate: (value, props) => props.allowedValues.includes(values)
: validate value based on props
License
MIT