Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcoreio/react-router-parsed
<Route> wrapper to handle param/query parsing
https://github.com/jcoreio/react-router-parsed
react react-router
Last synced: 2 days ago
JSON representation
<Route> wrapper to handle param/query parsing
- Host: GitHub
- URL: https://github.com/jcoreio/react-router-parsed
- Owner: jcoreio
- License: mit
- Created: 2018-07-11T21:03:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-10T21:11:48.000Z (about 1 year ago)
- Last Synced: 2024-11-06T18:01:11.842Z (12 days ago)
- Topics: react, react-router
- Language: JavaScript
- Homepage:
- Size: 2.89 MB
- Stars: 1
- Watchers: 4
- Forks: 1
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-router-parsed
[](https://circleci.com/gh/jcoreio/react-router-parsed)
[](https://codecov.io/gh/jcoreio/react-router-parsed)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/react-router-parsed)
This package provides a wrapper to handle url parameter and querystring
parsing and error handling in an organized fashion.
## Rationale
After working with `react-router` 4 enough, I started to realize that I had a lot of duplicated code to parse my
URL params and query string within render methods and event handlers for my components. For instance:
```js
class EditDeviceView extends React.Component {
render() {
const {match: {params}} = this.props
const organizationId = parseInt(params.organizationId)
const deviceId = parseInt(params.deviceId)
return (
{({loading, data}) => (
...
)}
)
}
handleSubmit = () => {
// duplicated code:
const {match: {params}} = this.props
const organizationId = parseInt(params.organizationId)
const deviceId = parseInt(params.deviceId)
...
}
}
```
After awhile, I had had enough of this. While I could have moved the parsing logic to a function in the same file,
I realized everything would be easier if I parse the params and query outside of my component and pass in the
already-parsed values as props.
## Quick Start
```sh
npm install --save react-router react-router-parsed
```
```js
import Route from 'react-router-parsed/Route'
import useRouteMatch from 'react-router-parsed/useRouteMatch'
```
### Parsing URL parameters
If you need to parse any url parameters, add a `paramParsers` property and
consume the `params` prop in your route `component`, `render` function, or
`children`:
```js
import Route from 'react-router-parsed/Route'
const EditUserRoute = () => (
(
)}
/>
)
```
```js
import useRouteMatch from 'react-router-parsed/useRouteMatch'
const EditUserRoute = () => {
const {
match,
params: { userId },
error,
} = useRouteMatch({
path: '/users/:userId',
paramParsers: { userId: parseInt },
})
if (!match) return null
if (error) return {error.message}
return
}
```
For each property in `paramParsers`, the key is the url parameter name, and the
value is a function that takes the following arguments and returns the parsed
value.
- `raw` - the raw string value of the parameter
- `param` - the key, or parameter name
- `info` - a hash of additional info; right now, just `{match}`
### Parsing `location.search`
If you need to parse `location.search`, add a `queryParser` property and
consume the `query` prop in your route `component`, `render` function, or
`children`:
```js
import qs from 'qs'
import Route from 'react-router-parsed/Route'
const EditUserRoute = () => (
qs.parse(search.substring(1))}
render={({ query: { showMenu }, ...props }) => (
)}
/>
)
```
### Error handling
If any of your parsers throws errors, they will be collected and passed to an
(optional) `renderErrors` function:
```js
import Route from 'react-router-parsed/Route'
const EditUserRoute = () => (
{
const result = parseInt(userId)
if (!userId || !userId.trim() || !Number.isFinite(result)) {
throw new Error(`invalid userId: ${userId}`)
}
return result
},
}}
render={({ params: { userId }, ...props }) => (
)}
renderErrors={({ paramParseErrors }) => (
Invalid URL: {paramParseErrors.userId}
)}
/>
)
```
`renderErrors` will be called with the same props as `render`, plus:
- `paramParseError` - a compound `Error` from parsing params, if any
- `paramParseErrors` - an object with `Error`s thrown by the corresponding
`paramParsers`
- `queryParseError` - the `Error` from `queryParser`, if any
- `error` - `paramParseError || queryParseError`
With the `useRouteMatch` hook, `error` `paramParseError`, `paramParseErrors`, `queryParseError`
are props of the returned object:
```js
const EditUserRoute = (): React.Node | null => {
const {
match,
params: { userId },
paramParseErrors,
} = useRouteMatch({
path: '/users/:userId',
paramParsers: {
userId: (userId) => {
const result = parseInt(userId)
if (!userId || !userId.trim() || !Number.isFinite(result)) {
throw new Error(`invalid userId: ${userId}`)
}
return result
},
},
})
if (paramParseErrors) {
return (
Invalid URL: {paramParseErrors.userId}
)
}
if (!match) return null
return
}
```