https://github.com/dashed/react-hashchange
React component that notifies when browser's hash (i.e. `window.location.hash`) changes.
https://github.com/dashed/react-hashchange
change hash hashchange react react-hashchange url
Last synced: 8 months ago
JSON representation
React component that notifies when browser's hash (i.e. `window.location.hash`) changes.
- Host: GitHub
- URL: https://github.com/dashed/react-hashchange
- Owner: dashed
- License: mit
- Created: 2017-09-24T06:28:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-03T07:51:25.000Z (almost 7 years ago)
- Last Synced: 2025-05-16T17:06:33.340Z (9 months ago)
- Topics: change, hash, hashchange, react, react-hashchange, url
- Language: JavaScript
- Homepage:
- Size: 1.7 MB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-hashchange [](https://travis-ci.org/dashed/react-hashchange) [](https://www.npmjs.com/package/react-hashchange)
================
[](https://greenkeeper.io/)
> React component that notifies when browser's hash (i.e. `window.location.hash`) changes.
## Install
```sh
$ yarn add react-hashchange
# npm v5+
$ npm install react-hashchange
# before npm v5
$ npm install --save react-hashchange
```
## Usage
```js
// 3rd-party imports
import ReactDOM from "react-dom";
import React, { Component } from "react";
import HashChange from "react-hashchange";
// function as child component
ReactDOM.render(
console.log({ hash })}>
{({ hash }) => {
return
{`hash: ${hash}`};
}}
,
mountNode
);
// render prop
const render = ({ hash }) => {
return
{`hash: ${hash}`};
};
ReactDOM.render(
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()`](https://facebook.github.io/react/docs/react-component.html#render).
If `render` function is given, it has precedence over any given child component:
```js
{
return (
"I take precedence over any function as child component."
);
}}
>
{() => {
return "I will not render.";
}}
```
### 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 })`.
```js
{({ hash }) => {
return
{`hash: ${hash}`};
}}
````
### `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:
```js
const getLocationHash = () => {
return window.location.hash;
};
```
License
=======
MIT.