React component for animating vertical scrolling
### Install
```js
$ npm install react-scroll
```
or
```
$ yarn add react-scroll
```
### Run
```js
$ npm install
$ npm test
$ npm start
```
or
```js
$ yarn
$ yarn test
$ yarn start
```
### Examples
Checkout examples
Live example
> [Basic](https://codesandbox.io/s/basic-6t84k)
> [Basic-Keydown](https://codesandbox.io/s/l94kv62o4m)
> [Container](https://codesandbox.io/s/3zznv27l5)
> [With-hash](https://codesandbox.io/s/y0zzrk1v1j)
> [With-overflow](https://codesandbox.io/s/l94kv62o4m)
> [Code](https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js)
### Usage
```js
import React, { useEffect } from 'react';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy } from 'react-scroll';
const Section = () => {
// useEffect is used to perform side effects in functional components.
// Here, it's used to register scroll events and update scrollSpy when the component mounts.
useEffect(() => {
// Registering the 'begin' event and logging it to the console when triggered.
Events.scrollEvent.register('begin', (to, element) => {
console.log('begin', to, element);
});
// Registering the 'end' event and logging it to the console when triggered.
Events.scrollEvent.register('end', (to, element) => {
console.log('end', to, element);
});
// Updating scrollSpy when the component mounts.
scrollSpy.update();
// Returning a cleanup function to remove the registered events when the component unmounts.
return () => {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
};
}, []);
// Defining functions to perform different types of scrolling.
const scrollToTop = () => {
scroll.scrollToTop();
};
const scrollToBottom = () => {
scroll.scrollToBottom();
};
const scrollTo = () => {
scroll.scrollTo(100); // Scrolling to 100px from the top of the page.
};
const scrollMore = () => {
scroll.scrollMore(100); // Scrolling an additional 100px from the current scroll position.
};
// Function to handle the activation of a link.
const handleSetActive = (to) => {
console.log(to);
};
// Rendering the component's JSX.
return (
{/* Link component to scroll to "test1" element with specified properties */}
Test 1
{/* Other Link and Button components for navigation, each with their unique properties and targets */}
{/* ... */}
{/* Element components that act as scroll targets */}
test 1
test 2
test 6 (anchor)
{/* Links to elements inside a specific container */}
Go to first element inside container
Go to second element inside container
{/* Container with elements inside */}
first element inside container
second element inside container
Container to listen for scroll events and to perform scrolling in
spy
Make Link selected when scroll is at its targets position
hashSpy
Update hash based on spy, containerId has to be set to scroll a specific element
smooth
Animate the scrolling
offset
Scroll additional px ( like padding )
duration
time of the scroll animation - can be a number or a function (`function (scrollDistanceInPx) { return duration; }`), that allows more granular control at run-time
delay
Wait x milliseconds before scroll
isDynamic
In case the distance has to be recalculated - if you have content that expands etc.
onSetActive
Invoke whenever link is being set to active
onSetInactive
Invoke whenever link is lose the active status
ignoreCancelEvents
Ignores events which cancel animated scrolling
horizontal
Whether to scroll vertically (`false`) or horizontally (`true`) - default: `false`
spyThrottle
Time of the spy throttle - can be a number
### Full example
```js
Your name
```
### Scroll Methods
> Scroll To Top
```js
import { animateScroll } from 'react-scroll';
const options = {
// your options here, for example:
duration: 500,
smooth: true,
};
animateScroll.scrollToTop(options);
```
> Scroll To Bottom
```js
import { animateScroll } from 'react-scroll';
const options = {
// Your options here, for example:
duration: 500,
smooth: true,
};
animateScroll.scrollToBottom(options);
```
> Scroll To (position)
```js
import { animateScroll } from 'react-scroll';
const options = {
// Your options here, for example:
duration: 500,
smooth: true,
};
// Scroll to 100 pixels from the top of the page
animateScroll.scrollTo(100, options);
```
> Scroll To (Element)
animateScroll.scrollTo(positionInPixels, props = {});
```js
import { Element, scroller } from 'react-scroll';
// Somewhere else, even another file
scroller.scrollTo('myScrollToElement', {
duration: 1500,
delay: 100,
smooth: true,
containerId: 'ContainerElementID',
offset: 50, // Scrolls to element + 50 pixels down the page
// ... other options
});
```
> Scroll More (px)
```js
import { animateScroll } from 'react-scroll';
const options = {
// Your options here, for example:
duration: 500,
smooth: true,
};
// Scroll an additional 10 pixels down from the current scroll position
animateScroll.scrollMore(10, options);
```
### Scroll events
> begin - start of the scrolling
```js
import { Events } from 'react-scroll';
Events.scrollEvent.register('begin', function(to, element) {
console.log('begin', to, element);
});
```
> end - end of the scrolling/animation
```js
import { Events } from 'react-scroll';
Events.scrollEvent.register('end', function(to, element) {
console.log('end', to, element);
});
```
> Remove events
```js
import { Events } from 'react-scroll';
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
```
#### Create your own Link/Element
> Simply just pass your component to one of the high order components (Element/Scroll)
```js
import React from 'react';
import { ScrollElement, ScrollLink } from 'react-scroll';
const Element = (props) => {
return (
);
};
export const ScrollableElement = ScrollElement(Element);
const Link = (props) => {
return (
{props.children}
);
};
export const ScrollableLink = ScrollLink(Link);
```
### Scroll Animations
> Add a custom easing animation to the smooth option. This prop will accept a Boolean if you want the default, or any of the animations listed below
```js
import { scroller } from 'react-scroll';
scroller.scrollTo('myScrollToElement', {
duration: 1500,
delay: 100,
smooth: 'easeInOutQuint',
containerId: 'ContainerElementID',
// ... other options
});
```
> List of currently available animations:
```
linear
- no easing, no acceleration.
easeInQuad
- accelerating from zero velocity.
easeOutQuad
- decelerating to zero velocity.
easeInOutQuad
- acceleration until halfway, then deceleration.
easeInCubic
- accelerating from zero velocity.
easeOutCubic
- decelerating to zero velocity.
easeInOutCubic
- acceleration until halfway, then deceleration.
easeInQuart
- accelerating from zero velocity.
easeOutQuart
- decelerating to zero velocity.
easeInOutQuart
- acceleration until halfway, then deceleration.
easeInQuint
- accelerating from zero velocity.
easeOutQuint
- decelerating to zero velocity.
easeInOutQuint
- acceleration until halfway, then deceleration.
```
A good visual reference can be found at [easings.net](http://easings.net/)
#### Changelog
- [See the CHANGELOG](./CHANGELOG.md)