Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/space-fe/react-onroutechanged
An onRouteChanged wrapper for React components
https://github.com/space-fe/react-onroutechanged
changed hoc hook react react-components react-router routes
Last synced: 2 days ago
JSON representation
An onRouteChanged wrapper for React components
- Host: GitHub
- URL: https://github.com/space-fe/react-onroutechanged
- Owner: space-fe
- License: mit
- Created: 2019-05-22T02:49:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:22:21.000Z (almost 2 years ago)
- Last Synced: 2024-11-08T18:50:43.677Z (11 days ago)
- Topics: changed, hoc, hook, react, react-components, react-router, routes
- Language: JavaScript
- Size: 1.43 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# An onRouteChanged wrapper for React components
[](https://travis-ci.org/space-fe/react-onroutechanged)
This 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).
## Installation
Use `npm`
```shell
npm install react-onroutechanged
```
Use `yarn`
```shell
yarn add react-onroutechanged
```
## Usage
### ES6 Class Component
```javascript
import React from 'react'
import onRouteChangedHOC from 'react-onroutechanged'
class MyComponent extends React.Component {
handleRouteChanged = (prevLocation, nextLocation) => {
// ...do your stuff with location information here
}
}
const onRoutedChangedConfig = {
mounted: true,
onlyPathname: false
}
export default onRouteChangedHOC(MyComponent, onRoutedChangedConfig)
```
### Functional Component with UseState Hook
```javascript
import React, { useState } from 'react'
import onRouteChangedHOC from 'react-onroutechanged'
const MyComponent = () => {
const [location, setLocation] = useState()
MyComponent.handleRouteChanged = (prevLocation, nextLocation) => {
// ...do your stuff with location information here
setLocation(nextLocation)
}
}
const onRoutedChangedConfig = {
mounted: true,
onlyPathname: false
}
export default onRouteChangedHOC(MyComponent, onRoutedChangedConfig)
```
## Location Object
The `location` object has the following attributes:
* `location.pathname` - The path of the URL
* `location.search` - The URL query string
* `location.hash` - The URL hash fragment
**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.
## Configuration
`onRouteChangedHOC` receives an optional configuration object as the second parameter. Allowed values for the configuration are as follows:
| Name | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mounted` | `boolean` | `false` | If `true`, the `handleRouteChanged` method of the wrappedComponent will be called with `(null, currentLocation)`when the component is mounted. |
| `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. |