Hawsehole NPM | npm.io

Hawsehole ⚓

React component for navigation and transitions among named anchors. If present as children of anchors, heading levels (i.e. h1, h2, etc) determine navigation hierarchy. See example (and its code).

npm install --save hawsehole (or yarn add hawsehole)

All props are optional and documented in source.

Example

import React from 'react';
import { render } from 'react-dom';
import Hawsehole from 'hawsehole';

render(
  <Hawsehole>
    <a name="constitution"><h1>The Constitution of the United States</h1></a>

    <a name="preamble"><h2>Preamble</h2></a>
    <p>We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</p>

    <article>
      <a name="article-I"><h2>Article I</h2></a>
      
      <section>
        <a name="article-I-section-1"><h3>Section 1</h3></a>
        <p>All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.</p>
      </section>
      
      <section>
        <a name="article-I-section-2"><h3>Section 2</h3></a>
        <p>1: The House of Representatives shall be composed of Members chosen every second Year ...</p>
      </section>

    </article>

  </Hawsehole>
, document.getElementById('container'));

Planned features

scrolling to anchor on demand via prop
optionally replacing hash upon scrolling between anchors
support other tags, and attributes such as id

hawsehole v0.3.6

Hawsehole ⚓

Example

Planned features

See also