React component that notifies when browser's hash (i.e. `window.location.hash`) changes.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore init Sep 24, 2017
.travis.yml Update .travis.yml Apr 27, 2018
LICENSE init Sep 24, 2017
README.md
nwb.config.js
package.json chore(package): update nwb to version 0.21.1 Jan 12, 2018
yarn.lock

README.md

react-hashchange Build Status npm version

Greenkeeper badge

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.