Skip to content

React component for navigation and transitions among named anchors

License

Notifications You must be signed in to change notification settings

two-n/hawsehole

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

See also

About

React component for navigation and transitions among named anchors

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published