react-hashchange

react-hashchange

React component that notifies when browser's hash (i.e. window.location.hash) changes.

Install

$ yarn add react-hashchange
# npm v5+
$ npm install react-hashchange
# before npm v5
$ npm install --save react-hashchange

Usage

// 3rd-party imports

import ReactDOM from "react-dom";
import React, { Component } from "react";

import HashChange from "react-hashchange";

// function as child component

ReactDOM.render(
    <HashChange onChange={({ hash }) => console.log({ hash })}>
        {({ hash }) => {
            return <div>{`hash: ${hash}`}</div>;
        }}
    </HashChange>,
    mountNode
);

// render prop

const render = ({ hash }) => {
    return <div>{`hash: ${hash}`}</div>;
};

ReactDOM.render(
    <HashChange
        onChange={({ hash }) => console.log({ hash })}
        render={render}
    />,
    mountNode
);

Props

render (optional)

This is a render prop. To learn what that is, read: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce

An optional function that is called whenever the browser's hash (i.e. window.location.hash) changes.

The render function is invoked with an object argument: ({ hash }).

It's expected that render function returns a single React element. This has same API semantics as React.Component.render().

If render function is given, it has precedence over any given child component:

<HashChange
    render={() => {
        return (
            <div>"I take precedence over any function as child component."</div>
        );
    }}
>
    {() => {
        return <div>"I will not render."</div>;
    }}
</HashChange>

Function as child component (optional)

Same as render prop function (see above).

If render function is not given, then the child component will be invoked as a function.

The child component function is invoked with an object argument: ({ hash }).

<HashChange>
    {({ hash }) => {
        return <div>{`hash: ${hash}`}</div>;
    }}
</HashChange>

onChange (optional)

An optional function that is called whenever the browser's hash (i.e. window.location.hash) changes.

The onChange function is invoked with an object argument: ({ hash }).

getLocationHash (optional)

An optional function that returns the browser's hash. This function is called whenever hashchange event occurs.

If necessary, you may provide your own implementation of getLocationHash (e.g. handling browser nuances).

By default the implementation of getLocationHash is:

const getLocationHash = () => {
    return window.location.hash;
};

License

MIT.