Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-router-query-params
Advanced tools
Set query parameters with a schema for react-router.
npm install --save react-router-query-params
import withQueryParams from 'react-router-query-params';
...
const ExampleComponent = ({
queryParams,
setQueryParams,
}) = (
<div>
<div>
queryParams: {JSON.stringify(queryParams)}
</div>
<button onClick={() => setQueryParams({ example1: 'someQueryParam' })}>
Set query param example
</button>
</div>
);
const ConnectedComponent = withQueryParams({
stripUnknownKeys: false,
keys: {
example1: {
default: 'example-1-default',
validate: value => !!value && value.length > 3,
},
example2: {
default: (value, props) => props.defaultValue,
validate: (value, props) =>
!!value && !props.disallowedValues.includes(value)
}
}
})(ExampleComponent);
queryParams
(object): All current query parameters as key-value pairs in an object.
setQueryParams
(function): Set one or more query parameters.
this.props.setQueryParam({ key1: 'value1', key2: 'value2' })
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)
true
, removes keys from query parameters that are not configured with keys
keys
(object)
keys: {
example: {
default: 'default-value',
validate: () => true
}
}
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'
: sets defaultParam
from the component props as default valuedefault: undefined
: do not set query parameter at all by defaultvalidate
(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 propsMIT
FAQs
Set query parameters with a schema for react-router.
We found that react-router-query-params demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.