Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-scrollable-anchor

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scrollable-anchor

Provide smooth scrolling anchors in React.

  • 0.6.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12K
increased by8.04%
Maintainers
1
Weekly downloads
 
Created
Source

react-scrollable-anchor

npm version

Lightweight library for smooth scrolling anchors in React, tied to URL hash.

  • Land on correct anchor when page is loaded, based on URL hash value.
  • Scroll smoothly to anchors when URL hash changes. Easy links to sections with <a href='#sectionId'>.
  • URL hash updates automatically to reflect section in view
  • Option to record history on hash changes
npm install --save react-scrollable-anchor

Examples

Live Demo or Source

To run examples locally, npm run example, then open your browser to localhost:3210.

Usage

1. Creating a scrollable anchor

Use the ScrollableAnchor tag to wrap any React element, making it a scrollable anchor.

import React, { Component } from 'react'
import ScrollableAnchor from 'react-scrollable-anchor'

export default class Page extends Component {
  render() {
    return (
      <div>
        <a href='#section1'> Go to section 1 </a>
        <a href='#section2'> Go to section 2 </a>
        <ScrollableAnchor id={'section1'}>
          <div> Hello World </div>
        </ScrollableAnchor>
        <ScrollableAnchor id={'section2'}>
          <div> How are you world? </div>
        </ScrollableAnchor>
      </div>
    )
  }
}

2. Configure

Access configureAnchors to customize scrolling and anchors.

Offset all scrollable anchors by a fixed amount
import { configureAnchors } from 'react-scrollable-anchor'

// Offset all anchors by -60 to account for a fixed header
// and scroll more quickly than the default 400ms
configureAnchors({offset: -60, scrollDuration: 200})
Options:
optiondefault
offset0
scrollDuration400
keepLastAnchorHashfalse

3. Utilities

A small toolkit of scrolling utilies for use with anchors

Jump to top of page in a way that plays nicely with scrollable anchors
import { goToTop } from 'react-scrollable-anchor'

// scroll to top of the page
goToTop()
Scroll to any scrollable anchor, with option to record history
import { goToAnchor } from 'react-scrollable-anchor'

// scroll to #section1 without saving that hash update in history
goToAnchor('section1')
goToAnchor('section1', false)

// scroll to #section1, saving that hash update in history
goToAnchor('section1', true)
Clear the URL hash without affecting scroll location at all
import { removeHash } from 'react-scrollable-anchor'

// clear URL hash
removeHash()

Issues and feature requests

Please open issues on Github. Issues are easier to address if you include context and code samples.

Contributing

Please contribute!

Feedback or contact

Feel free to contact me at gabergg@gmail.com.

Keywords

FAQs

Package last updated on 05 Feb 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc