https://github.com/two-n/hawsehole

React component for navigation and transitions among named anchors
https://github.com/two-n/hawsehole

Last synced: 17 days ago
JSON representation

React component for navigation and transitions among named anchors

• Host: GitHub
• URL: https://github.com/two-n/hawsehole
• Owner: two-n
• License: mit
• Created: 2017-04-13T00:18:24.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-01T18:01:23.000Z (over 7 years ago)
• Last Synced: 2024-04-26T06:04:03.235Z (9 months ago)
• Language: JavaScript
• Size: 23.4 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](http://projects.two-n.com/hawsehole-demo) (and its [code](example/main.js)).

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

All props are optional and documented [in source](src/index.js#L12-L53).

## Example

```jsx

import React from 'react';

import { render } from 'react-dom';

import Hawsehole from 'hawsehole';

render(

  

    
The Constitution of the United States


    
Preamble

    
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.


    

      
Article I

      

      

        
Section 1

        
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.

      

      

      

        
Section 2

        
1: The House of Representatives shall be composed of Members chosen every second Year ...

      


    

  

, 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

- `scroll-behavior: smooth;` [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) | [caniuse](http://caniuse.com/#feat=css-scroll-behavior) | [polyfill](https://www.npmjs.com/package/smoothscroll-polyfill)

- [scrollNav](http://scrollnav.com/) jQuery plugin

- Bootstrap [ScrollSpy](https://getbootstrap.com/javascript/#scrollspy)