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

npm install --save react-hash-handler

Install via Yarn

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. <a href="#contact">Contact</a>) is clicked.

Examples

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 (
      <div className="page-wrapper">
        <HashHandler
          onChange={this.onHashChange}
          onClick={this.onHashClick}
        />
        <TargetScroller target={scrollTarget} />
        <nav>
          <ul>
            <li><a href="#overview">Overview</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
        ...
        <section id="overview">
          ...
        </section>
        <section id="about">
          ...
        </section>
        <section id="contact">
          ...
        </section>
      </div>
    );
  }
}

License

MIT © Ryan Hefner