react-resource-detector

A resource detector for React, based on 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

npm install react-resource-detector

Use yarn

yarn add react-resource-detector

Usage

ES6 Class Component

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 (
      <div>student</div>
    )
  }
}

export default routeResourceDetectorHOC(StudentInfo, {
  shouldDetectResourceForAllRoutes: false,
  detectResourceInSequence: true,
  deselectResources: true
})

Functional Component

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.