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: about 1 month 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 (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-12-25T22:47:31.000Z (almost 3 years ago)
• Last Synced: 2024-10-05T18:16:52.171Z (about 2 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: 2
• 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

![npm](https://img.shields.io/npm/v/react-hash-handler?style=flat-square)

![NPM](https://img.shields.io/npm/l/react-hash-handler?style=flat-square)

![npm](https://img.shields.io/npm/dt/react-hash-handler?style=flat-square)

![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/react-hash-handler?style=flat-square)

![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/react-hash-handler?style=flat-square)

![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/ryanhefner/react-hash-handler?style=flat-square)

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 (

      


        

        

        

          


            
Overview

            
About

            
Contact

          

        

        ...

        

          ...

        

        

          ...

        

        

          ...

        

      

    );

  }

}

```


## License

[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)