https://github.com/space-fe/react-resource-detector
A resource detector for React
https://github.com/space-fe/react-resource-detector
Last synced: 11 months ago
JSON representation
A resource detector for React
- Host: GitHub
- URL: https://github.com/space-fe/react-resource-detector
- Owner: space-fe
- License: mit
- Created: 2019-05-13T08:05:31.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T02:31:49.000Z (over 3 years ago)
- Last Synced: 2025-03-25T21:11:59.190Z (about 1 year ago)
- Language: JavaScript
- Size: 3.3 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-resource-detector
[](https://travis-ci.org/space-fe/react-resource-detector)
A resource detector for React, based on [**react-onroutechanged**](https://github.com/space-fe/react-onroutechanged).
The `react-resource-detector` is a React Higer Order Component(HOC) that you can use with your own React components if you want to detect the resources in route when route changes.
## Installation
Use `npm`
```shell
npm install react-resource-detector
```
Use `yarn`
```shell
yarn add react-resource-detector
```
## Usage
### ES6 Class Component
```javascript
import React from 'react'
import routeResourceDetectorHOC from 'react-resource-detector'
class StudentInfo extends React.PureComponent {
this.resourceConfigurations = {
'class/:classId': {
// if detect resources in sequence, handler should return a promise.
handler: (matches, path, location) => {
// ...detect resource
/*
* matches: { classId: value }
* path: /class/class-id
* location: Current location object
*/
}
},
'student/:studentId': {
handler: (matches, path, location) => {}
}
}
this.routeConfigurations = {
'/class/:classId/student/:studentId': {
handler: (matches, path, location) => {},
deselect: (matches, path, prevLocation) => {},
exact: true,
shouldDetectResource: true,
whiteList: ['student/:studentId'],
blackList: ['class/:classId']
},
}
render () {
return (
student
)
}
}
export default routeResourceDetectorHOC(StudentInfo, {
shouldDetectResourceForAllRoutes: false,
detectResourceInSequence: true,
deselectResources: true
})
```
### Functional Component
```javascript
import React from 'react'
import routeResourceDetectorHOC from 'react-resource-detector'
const StudentInfo = (props) => {
StudentInfo.resourceConfigurations = {} // The same as ES6 Class Component
StudentInfo.routeConfigurations = {} // The same as ES6 Class Component
}
export default routeResourceDetectorHOC(StudentInfo)
```
## routeResourceDetectorHOC
- First parameter: Decorated Component.
- Second parameter: Global detection configuration object.
### Global Detection Configuration
| Name | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `shouldDetectResourceForAllRoutes` | `boolean` | `true` | If `true`, the resources lies in all routes will be detected by default. |
| `detectResourceInSequence` | `boolean` | `false` | If `true`, the resources will be detected in sequence, it will stop detecting resources when error occurs. See more in example. |
| `deselectResources` | `boolean` | `false` | If `true`, resource detector will invoke a deselect function provided by current route right before the route changes. See more in example. |
## Resource Configuration
- The `resourceConfigurations` is a dictionary of resource detection configurations. The key is a resource pattern, and the value is a resource detection configuration for this resource.
- `resourceConfigurations` must be provided, otherwise an error will be reported.
### Resource Pattern
A resource pattern can be either a `string` or a `regexp` object.
### Resource Detection Configuration
| Name | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `handler` | `function` | | (matches, path, location) => {}, this function will be triggered when there is a match between the resource pattern and the route. `matches` is the map of param name and value lies in the pattern, `path` is the exact match result of the pattern, `location` is the current location object. |
## Route Configuration
- The `routeConfigurations` is a dictionary of route processing configurations. The key is a route pattern, and the value is a route processing configuration for this route.
- `routeConfigurations` is optional, if not provided, all of the routes will be checked against the resource configurations to find out if there are some matches.
### Route Pattern
A route pattern can be either a `string` or a `regexp` object.
### Route Processing Configuration
| Name | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `handler` | `function` | | Same as the resource configuration above. |
| `deselect` | `function` | | (matches, path, prevLocation) => {}, if `deselectResources` is true, this function will be triggered when there is a matched route of previous location in routeConfigurations before route changes. `matches` is the map of param name and value lies in the pattern, `path` is the exact match result of the pattern, `prevLocation` is the previous location object. |
| `exact` | `boolean` | `true` | If `true`, the handler function will be triggered when the route completely matches the route pattern. |
| `shouldDetectResource` | `boolean` | `true` | If `true`, the resources lies in the route will be detected. |
| `whiteList` | `array` | | Array of resource patterns. Resources in the whiteList will be detected. |
| `blackList` | `array` | | Array of resource patterns. Resources in the blackList will not be detected. |
#### WhiteList and BlackList
- If only `whiteList` is provided, the route will only be checked against the whitelisted resource patterns.
- If only `blackList` is provided, the route will be checked against the resource patterns of `resourceConfigurations` except the blacklisted ones.
- If both `whiteList` and `blackList` are provided, the route will be checked against the whitelisted resource patterns that are not in blackList.