This package has been deprecated

Author message:

The improvements in this fork have been merged into the original package, please use react-scrollchor instead

@seinopsys-forks/react-scrollchor
TypeScript icon, indicating that this package has built-in type declarations

7.0.3 • Public • Published

React Scrollchor

npm version npm downloads

A React component for scroll to #hash links with smooth animations. Scrollchor is a mix of Scroll and Anchor, a joke name for a useful component.

See it in action:

hash is the id of a HTML tag on the current page.

Installation

npm

npm install @seinopsys-forks/react-scrollchor --save

Dependencies

  • User should provide their own React package

Usage

import { Scrollchor } from '@seinopsys-forks/react-scrollchor';

export default (props) => (
    <Page>
    
        <Navbar brand={brand} className="navbar-fixed-top">
          <NavItem><Scrollchor to="" className="nav-link">Home</Scrollchor></NavItem>
          <NavItem><Scrollchor to="#sample-code" className="nav-link">Sample</Scrollchor></NavItem>
          <NavItem><Scrollchor to="#features" className="nav-link">Features</Scrollchor></NavItem>
          <NavItem><Scrollchor to="footer" className="nav-link">SignUp</Scrollchor></NavItem>
        </Navbar>
        
        <Section id="sample-code">
        
        </Section>
        
        <div id="features">
        
        </div>
        
        <footer id="footer">
        
        </footer>
    
    </Page>
);

Props

The component is written in TypeScript and the npm package contains type definitions which will help you with IDE autocompletion.

Custom animations

Animation behavior can be customized:

<Scrollchor to="#aboutus" animate={{offset: 20, duration: 600}} className="nav-link">Home</Scrollchor>

default animation settings

import { AnimateConfig, easeOutQuad } from '@seinopsys-forks/react-scrollchor';

const defaultAnimation: AnimateConfig = { offset: 0, duration: 400, easing: easeOutQuad };

more Easing functions

before and after Animate callbacks

Use these callbacks to trigger behaviors like: update state, load async stuff, etc.

<Scrollchor to="#aboutus" afterAnimate={() => updateState(this)}>Home</Scrollchor>

Scrollable ancestor container

Scrollchor works within any scrollable parent container. The root element of the document will be chosen if none is specified.

Hosted example show how to use a different container using prop target.

  • Click Within scrollable container checkbox: hosted example(full example below)

Full Example

react-scrollchor--example

Credits

author

maintainers

contributors

Contributing

  • Documentation improvement
  • Feel free to send any PR

License

ISC

Package Sidebar

Install

npm i @seinopsys-forks/react-scrollchor

Weekly Downloads

1

Version

7.0.3

License

ISC

Unpacked Size

41.7 kB

Total Files

12

Last publish

Collaborators

  • seinopsys