‚̧Nutrient Packed Morsels
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    react-resource-detector
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    react-resource-detector

    Build Status

    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.

    Install

    npm i react-resource-detector

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    201 kB

    Total Files

    37

    Last publish

    Collaborators

    • avatar