README

An onRouteChanged wrapper for React components

This is a React High Order Component(HOC) that you can use to handle the route changed events when you use react-router.

Installation

Use npm

npm install react-onroutechanged

Use yarn

yarn add react-onroutechanged

Usage

ES6 Class Component

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

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 withRouter 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 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.

Usage no npm install needed!