- Notifications
You must be signed in to change notification settings - Fork24
A React component for scroll to `#hash` links with smooth animations
License
some-react-components/react-scrollchor
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A React component for scrolling to
#hashlinks with smooth animations.Scrollchor is a mix ofScrollandAnchor, a joke name for a useful component.
See it in action:
- demovideo
hash is theid attribute of an HTML tag on the current page.
npm install react-scrollchor --save
yarn add react-scrollchor
You must have React (≥16.8.0) installed in your project before trying to use this component. This minimum version constraint represents the React version whichintroduced hooks.
import{Scrollchor}from'react-scrollchor';import{Navbar,NavItem,Page,Section}from'./components';constLandingPage=(props)=>(<Page><Navbarbrand={brand}className="navbar-fixed-top"><NavItem><Scrollchorto=""className="nav-link">Home</Scrollchor></NavItem><NavItem><Scrollchorto="#sample-code"className="nav-link">Sample</Scrollchor></NavItem><NavItem><Scrollchorto="#features"className="nav-link">Features</Scrollchor></NavItem><NavItem><Scrollchorto="footer"className="nav-link">SignUp</Scrollchor></NavItem></Navbar><Sectionid="sample-code"><divstyle={{height:'100vh'}}/></Section><divid="features"><divstyle={{height:'100vh'}}/></div><footerid="footer"><divstyle={{height:'100vh'}}/></footer></Page>);exportdefaultLandingPage;
The package ships with TypeScript type definitions to help with IDE autocompletion, but the sections below should give you a quick rundown of each prop if you prefer this format. Any props not listed below are passed directly on to the underlying<a> tag, except forhref andonClick.
Theto prop controls the finalhref prop, andonClick is used internally to perform the scrolling. If you need to run some code when the link is clicked use thebeforeAnimate prop instead.
The anchor (id) to which this link should scroll to. Any leading# will be stripped from this value.
The element scrolling will be performed on when clicked. Leading# will be stripped here as well.
Scrollchor works within any scrollable parent container. If no target is provided (or the target element is not found on the page), the default is scrolling both the<html> and<body> elements simultaneously.
The smooth scrolling animation can be customized using this prop. Three pre-defined easing functions are exported by the package:easeOutQuad,swing,linear. When not provided, the default looks like this:
import{AnimateConfig,easeOutQuad}from'react-scrollchor';constdefaultAnimate:AnimateConfig={offset:0,duration:400,easing:easeOutQuad,};
offset?: number— Additional pixels to scroll relative to the target element (supports negative values, e.g. for fixed position headers)duration?: number— Length of the animation in millisecondseasing?: ScrollchorEasingFunction— Easing function to calculate the animation steps. Pass a function that matches the exported interface for a custom easing.# Parameter Meaning 0 percent Percent completed of the animation (decimal, 0.0to1.0)1 elapsedTime Time elapsed since the animation began, in ms 2 startValue Static value set to 03 valueChange Static value set to 14 duration Duration of the animation, in ms Returns a decimal indicating how close the animation is to the end value (
0= start,1= finished,1.2= 20% over the end value, think "bounce" effects)
The default values can be customized all at once or individually by providing only the properties you want to override. For example:
import{Scrollchor,linear}from'react-scrollchor';constHomeLink=()=>(<Scrollchorto="home"animate={{duration:1000,easing:linear}}> Home</Scrollchor>);
You can find additional easing functions at these links:
You can use these callbacks to trigger behaviors like: update state, load async stuff, etc. when either stage happens. The functions receive the originatingMouseEvent as their only argument, the return value is not used.
beforeAnimate is triggered before the animation starts, i.e. immediately when the link is clicked, whileafterAnimate is called once the animation has finished.
<Scrollchorto="#aboutus"afterAnimate={()=>setActive('home')}>Home</Scrollchor>
- bySabi Files <>@bySabi
- xehpuk <>@xehpuk
- SeinopSys <>@SeinopSys
- Jean Chung <>@jeanchung
- Chua Kang Ming <>@kambing86
- Benjamin MICHEL <>@SBRK
- Documentation improvement
- Feel free to send any PR
About
A React component for scroll to `#hash` links with smooth animations
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors6
Uh oh!
There was an error while loading.Please reload this page.