{"id":21667143,"url":"https://github.com/space-fe/react-resource-detector","last_synced_at":"2025-07-14T21:39:25.216Z","repository":{"id":34899868,"uuid":"186373798","full_name":"space-fe/react-resource-detector","owner":"space-fe","description":"A resource detector for React","archived":false,"fork":false,"pushed_at":"2022-12-12T02:31:49.000Z","size":3458,"stargazers_count":4,"open_issues_count":23,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T21:11:59.190Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/space-fe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-13T08:05:31.000Z","updated_at":"2020-06-28T07:44:25.000Z","dependencies_parsed_at":"2023-01-15T10:15:27.210Z","dependency_job_id":null,"html_url":"https://github.com/space-fe/react-resource-detector","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-resource-detector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-resource-detector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-resource-detector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-resource-detector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/space-fe","download_url":"https://codeload.github.com/space-fe/react-resource-detector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248504198,"owners_count":21115133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T11:34:04.336Z","updated_at":"2025-04-12T01:32:07.931Z","avatar_url":"https://github.com/space-fe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-resource-detector\n[![Build Status](https://travis-ci.org/space-fe/react-resource-detector.svg?branch=master)](https://travis-ci.org/space-fe/react-resource-detector)\n\nA resource detector for React, based on [**react-onroutechanged**](https://github.com/space-fe/react-onroutechanged).\n\nThe `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.\n\n## Installation\nUse `npm`\n```shell\nnpm install react-resource-detector\n```\nUse `yarn`\n```shell\nyarn add react-resource-detector\n```\n\n## Usage\n\n### ES6 Class Component\n```javascript\nimport React from 'react'\nimport routeResourceDetectorHOC from 'react-resource-detector'\n\nclass StudentInfo extends React.PureComponent {\n  this.resourceConfigurations = {\n    'class/:classId': {\n      // if detect resources in sequence, handler should return a promise.\n      handler: (matches, path, location) =\u003e {\n        // ...detect resource\n        /*\n         * matches: { classId: value }\n         * path: /class/class-id\n         * location: Current location object\n         */\n      }\n    },\n    'student/:studentId': {\n      handler: (matches, path, location) =\u003e {}\n    }\n  }\n\n  this.routeConfigurations = {\n    '/class/:classId/student/:studentId': {\n      handler: (matches, path, location) =\u003e {},\n      deselect: (matches, path, prevLocation) =\u003e {},\n      exact: true,\n      shouldDetectResource: true,\n      whiteList: ['student/:studentId'],\n      blackList: ['class/:classId']\n    },\n  }\n\n  render () {\n    return (\n      \u003cdiv\u003estudent\u003c/div\u003e\n    )\n  }\n}\n\nexport default routeResourceDetectorHOC(StudentInfo, {\n  shouldDetectResourceForAllRoutes: false,\n  detectResourceInSequence: true,\n  deselectResources: true\n})\n```\n\n### Functional Component\n```javascript\nimport React from 'react'\nimport routeResourceDetectorHOC from 'react-resource-detector'\n\nconst StudentInfo = (props) =\u003e {\n  StudentInfo.resourceConfigurations = {} // The same as ES6 Class Component\n  StudentInfo.routeConfigurations = {}    // The same as ES6 Class Component\n}\n\nexport default routeResourceDetectorHOC(StudentInfo)\n```\n\n## routeResourceDetectorHOC\n- First parameter: Decorated Component.\n- Second parameter: Global detection configuration object.\n\n### Global Detection Configuration\n| Name           | Type      | Default | Description                                                                                                                                                                                                                             |\n| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `shouldDetectResourceForAllRoutes` | `boolean` | `true` | If `true`, the resources lies in all routes will be detected by default. |\n| `detectResourceInSequence` | `boolean` | `false` | If `true`, the resources will be detected in sequence, it will stop detecting resources when error occurs. See more in example. |\n| `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. |\n\n## Resource Configuration\n- 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.\n- `resourceConfigurations` must be provided, otherwise an error will be reported.\n\n### Resource Pattern\nA resource pattern can be either a `string` or a `regexp` object.\n\n### Resource Detection Configuration\n| Name           | Type      | Default | Description                                                                                                                                                                                                                             |\n| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `handler` | `function` |  | (matches, path, location) =\u003e {}, 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. |\n\n## Route Configuration\n- 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.\n- `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.\n\n### Route Pattern\nA route pattern can be either a `string` or a `regexp` object.\n\n### Route Processing Configuration\n| Name           | Type      | Default | Description                                                                                                                                                                                                                             |\n| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `handler` | `function` |  | Same as the resource configuration above. |\n| `deselect` | `function` |  | (matches, path, prevLocation) =\u003e {}, 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. |\n| `exact` | `boolean` | `true` | If `true`, the handler function will be triggered when the route completely matches the route pattern. |\n| `shouldDetectResource` | `boolean` | `true` | If `true`, the resources lies in the route will be detected. |\n| `whiteList` | `array` |  | Array of resource patterns. Resources in the whiteList will be detected. |\n| `blackList` | `array` |  | Array of resource patterns. Resources in the blackList will not be detected. |\n\n#### WhiteList and BlackList\n- If only `whiteList` is provided, the route will only be checked against the whitelisted resource patterns.\n- If only `blackList` is provided, the route will be checked against the resource patterns of `resourceConfigurations` except the blacklisted ones.\n- If both `whiteList` and `blackList` are provided, the route will be checked against the whitelisted resource patterns that are not in blackList.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Freact-resource-detector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspace-fe%2Freact-resource-detector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Freact-resource-detector/lists"}