React Scrollchor
A React component for scroll to
#hash
links with smooth animations. Scrollchor is a mix ofScroll
andAnchor
, a joke name for a useful component.
See it in action:
- demo video
- example page and source code
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 };
Easing
functions
more
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
Credits
author
- bySabi Files <> @bySabi
maintainers
- SeinopSys david@seinopsys.dev @SeinopSys
contributors
- Jean Chung <> @jeanchung
- Chua Kang Ming <> @kambing86
- Benjamin MICHEL <> @SBRK
- xehpuk <> @xehpuk
Contributing
- Documentation improvement
- Feel free to send any PR