https://github.com/ryanhefner/react-hash-handler
#️⃣ React component that makes it easy to compose hash change and click handling into your application or site.
https://github.com/ryanhefner/react-hash-handler
hash-click hashchange react react-component
Last synced: 4 months ago
JSON representation
#️⃣ React component that makes it easy to compose hash change and click handling into your application or site.
- Host: GitHub
- URL: https://github.com/ryanhefner/react-hash-handler
- Owner: ryanhefner
- License: mit
- Created: 2018-05-09T15:56:37.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T22:47:31.000Z (over 4 years ago)
- Last Synced: 2025-12-07T19:32:49.110Z (5 months ago)
- Topics: hash-click, hashchange, react, react-component
- Language: JavaScript
- Homepage: https://www.pkgstats.com/pkg:react-hash-handler
- Size: 693 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-hash-handler
React component that makes it easy to compose hashchange and hash click handling
into your application or site.
## Install
Install via [npm](https://npmjs.com/package/react-hash-handler)
```sh
npm install --save react-hash-handler
```
Install via [Yarn](https://yarn.fyi/react-hash-handler)
```sh
yarn add react-hash-handler
```
## How to use
At its core, the `HashHandler` is a pretty straight-forward component that doesn’t
do much beyond letting your site or app know when the hash changes, or when a
hash link is clicked. Feel free to use it however you want via the callback props
that are available on the component.
### Props
* `onChange:Func` - Called when the browser `hashchange` event is fired.
* `onClick:Func` - Called when a hash link (ex. `Contact`) is clicked.
### Examples
```js
import React, { Component } from 'react';
import TargetScroller from 'react-target-scroller';
import HashHandler from 'react-hash-handler';
class ExampleComponent extends Compnonent {
constructor(props) {
super(props);
this.state = {
scrollTarget: null,
};
this.onHashChange = this.onHashChange.bind(this);
this.onHashClick = this.onHashClick.bind(this);
}
onHashChange({hash}) {
this.setState({
scrollTarget: `#${hash}`,
});
}
onHashClick({hash}) {
this.setState({
scrollTarget: `#${hash}`,
});
}
render() {
const {
scrollTarget,
} = this.state;
return (
);
}
}
```
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)