{"id":20809554,"url":"https://github.com/space-fe/react-onroutechanged","last_synced_at":"2025-05-07T08:06:38.259Z","repository":{"id":34899867,"uuid":"187951014","full_name":"space-fe/react-onroutechanged","owner":"space-fe","description":"An onRouteChanged wrapper for React components","archived":false,"fork":false,"pushed_at":"2023-01-03T22:22:21.000Z","size":1496,"stargazers_count":5,"open_issues_count":14,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-08T18:50:43.677Z","etag":null,"topics":["changed","hoc","hook","react","react-components","react-router","routes"],"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-22T02:49:12.000Z","updated_at":"2024-01-05T13:09:42.000Z","dependencies_parsed_at":"2023-01-15T10:15:15.417Z","dependency_job_id":null,"html_url":"https://github.com/space-fe/react-onroutechanged","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-onroutechanged","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-onroutechanged/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-onroutechanged/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-onroutechanged/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/space-fe","download_url":"https://codeload.github.com/space-fe/react-onroutechanged/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224722589,"owners_count":17358746,"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":["changed","hoc","hook","react","react-components","react-router","routes"],"created_at":"2024-11-17T20:14:23.301Z","updated_at":"2024-11-17T20:14:23.967Z","avatar_url":"https://github.com/space-fe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# An onRouteChanged wrapper for React components\n[![Build Status](https://travis-ci.org/space-fe/react-onroutechanged.svg?branch=master)](https://travis-ci.org/space-fe/react-onroutechanged)\n\nThis is a React High Order Component(HOC) that you can use to handle the route changed events when you use [**react-router**](https://github.com/ReactTraining/react-router).\n\n## Installation\nUse `npm`\n```shell\nnpm install react-onroutechanged\n```\nUse `yarn`\n```shell\nyarn add react-onroutechanged\n```\n## Usage\n### ES6 Class Component\n```javascript\nimport React from 'react'\nimport onRouteChangedHOC from 'react-onroutechanged'\n\nclass MyComponent extends React.Component {\n  handleRouteChanged = (prevLocation, nextLocation) =\u003e {\n    // ...do your stuff with location information here\n  }\n}\n\nconst onRoutedChangedConfig = {\n  mounted: true,\n  onlyPathname: false\n}\n\nexport default onRouteChangedHOC(MyComponent, onRoutedChangedConfig)\n```\n\n### Functional Component with UseState Hook\n```javascript\nimport React, { useState } from 'react'\nimport onRouteChangedHOC from 'react-onroutechanged'\n\nconst MyComponent = () =\u003e {\n  const [location, setLocation] = useState()\n\n  MyComponent.handleRouteChanged = (prevLocation, nextLocation) =\u003e {\n    // ...do your stuff with location information here\n    setLocation(nextLocation)\n  }\n}\n\nconst onRoutedChangedConfig = {\n  mounted: true,\n  onlyPathname: false\n}\n\nexport default onRouteChangedHOC(MyComponent, onRoutedChangedConfig)\n```\n\n## Location Object\nThe `location` object has the following attributes:\n* `location.pathname` - The path of the URL\n* `location.search` - The URL query string\n* `location.hash` - The URL hash fragment\n\n**Notes**: This library is built on top of [react-router](!https://github.com/ReactTraining/react-router) [withRouter](!https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md) HOC and the location object passed to `handledRouteChanged` method is the exact same one provided by `withRouter` HOC, so you can look at [its documentation](!https://github.com/ReactTraining/history) for more information on the `location` object.\n## Configuration\n`onRouteChangedHOC` receives an optional configuration object as the second parameter. Allowed values for the configuration are as follows:\n\n| Name           | Type      | Default | Description                                                                                                                                                                                                                             |\n| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `mounted`      | `boolean` | `false` | If `true`, the `handleRouteChanged` method of the wrappedComponent will be called with `(null, currentLocation)`when the component is mounted.                                                                                          |\n| `onlyPathname` | `boolean` | `true`  | If `true`, the `handleRouteChanged` method will only be called when the `pathname` of the location has been changed. If `false`, the changes of `search` or `hash` of the `location` will also trigger the `handleRouteChanged` method. |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Freact-onroutechanged","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspace-fe%2Freact-onroutechanged","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Freact-onroutechanged/lists"}