What is react-scroll?
The react-scroll package provides smooth scrolling functionality for React applications. It allows developers to create scrollable components and implement smooth scrolling animations to specific elements within a page.
What are react-scroll's main functionalities?
Smooth Scrolling to Elements
This feature allows you to create links that smoothly scroll to specific elements on the page. The 'Link' component is used to create the scrollable link, and the 'Element' component is used to define the target section.
import { Link, Element } from 'react-scroll';
function App() {
return (
<div>
<Link to="section1" smooth={true} duration={500}>Go to Section 1</Link>
<Element name="section1" className="element">
Section 1
</Element>
</div>
);
}
Scroll Events
This feature allows you to register and handle scroll events. You can log or perform actions when scrolling begins or ends. The 'animateScroll' function can be used to programmatically scroll to specific positions.
import { Events, animateScroll as scroll, scroller } from 'react-scroll';
function App() {
useEffect(() => {
Events.scrollEvent.register('begin', function() {
console.log('begin', arguments);
});
Events.scrollEvent.register('end', function() {
console.log('end', arguments);
});
return () => {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
};
}, []);
return (
<div>
<button onClick={() => scroll.scrollToTop()}>Scroll to Top</button>
</div>
);
}
Scroll to Top
This feature provides a simple way to scroll to the top of the page programmatically. The 'scrollToTop' function from 'animateScroll' is used to achieve this.
import { animateScroll as scroll } from 'react-scroll';
function App() {
return (
<div>
<button onClick={() => scroll.scrollToTop()}>Scroll to Top</button>
</div>
);
}
Other packages similar to react-scroll
react-router-hash-link
The react-router-hash-link package provides smooth scrolling to hash links within a React Router application. It integrates with React Router to enable smooth scrolling to elements identified by hash links. Compared to react-scroll, it is more focused on hash-based navigation within React Router.
react-scrollable-anchor
The react-scrollable-anchor package allows for smooth scrolling to anchor links within a React application. It provides a simple API to create scrollable anchor links. Compared to react-scroll, it is more focused on anchor-based navigation and does not provide as many customization options.
react-scrollspy
The react-scrollspy package provides scrollspy functionality for React applications. It allows you to highlight navigation links based on the current scroll position. Compared to react-scroll, it focuses on tracking scroll positions and updating navigation links accordingly.
React Scroll
Directive for basic scrolling and smooth scrolling.
Install
$ npm install react-scroll
Run
$ npm install
$ npm test
$ npm run examples
Examples
Checkout examples
Basic
Live
Or
Code
Usage
var React = require('react');
var Scroll = require('react-scroll');
var Link = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var Section = React.createClass({
componentDidMount: function() {
Events.scrollEvent.register('begin', function(to, element) {
console.log("begin", arguments);
});
Events.scrollEvent.register('end', function(to, element) {
console.log("end", arguments);
});
},
componentWillUnmount: function() {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
},
scrollToTop: function() {
scroll.scrollToTop();
},
scrollToBottom: function() {
scroll.scrollToBottom();
},
scrollTo: function() {
scroll.scrollTo(100);
},
scrollMore: function() {
scroll.scrollMore(100);
},
render: function () {
return (
<div>
<Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} >
Test 1
</Link>
<Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
Test 2 (delay)
</Link>
<DirectLink className="test6" to="anchor" spy={true} smooth={true} duration={500}>
Test 6 (anchor)
</DirectLink>
<Button activeClass="active" className="btn" type="submit" value="Test 2" to="test2" spy={true} smooth={true} offset={50} duration={500} >
Test 2
</Button>
<Element name="test1" className="element">
test 1
</Element>
<Element name="test2" className="element">
test 2
</Element>
<div id="anchor" className="element">
test 6 (anchor)
</div>
<Link activeClass="active" to="firstInsideContainer" spy={true} smooth={true} duration={250} containerId="containerElement">
Go to first element inside container
</Link>
<Link activeClass="active" to="secondInsideContainer" spy={true} smooth={true} duration={250} containerId="containerElement">
Go to second element inside container
</Link>
<div className="element" id="containerElement">
<Element name="firstInsideContainer">
first element inside container
</Element>
<Element name="secondInsideContainer">
second element inside container
</Element>
</div>
<a onClick={this.scrollToTop}>To the top!</a>
<br/>
<a onClick={this.scrollToBottom}>To the bottom!</a>
<br/>
<a onClick={this.scrollTo}>Scroll to 100px from the top</a>
<br/>
<a onClick={this.scrollMore}>Scroll 100px more from the current position!</a>
</div>
);
}
});
React.render(
<Section />,
document.getElementById('example')
);
Props/Options
activeClass - class applied when element is reached
to - target to scroll to
containerId - container to listen for scroll events and to perform scrolling in
spy - make Link selected when scroll is at it's targets position
smooth - animate the scrolling
offset - scroll additional px ( like padding )
duration - time of the scroll animation
delay - wait x seconds before scroll
isDynamic - in case the distance has to be recalculated - if you have content that expands etc.
<Link activeClass="active"
to="target"
spy={true}
smooth={true}
offset={50}
duration={500}
delay={1000}
isDynamic={true}
>
Your name
</Link>
Scroll Methods
Scroll To Top
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollToTop(options);
Scroll To Bottom
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollToBottom(options);
Scroll To (position)
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollTo(100, options);
Scroll To (Element)
animateScroll.scrollTo(positionInPixels, props = {});
var Scroll = require('react-scroll');
var Element = Scroll.Element;
var scroller = Scroll.scroller;
<Element name="myScrollToElement"></Element>
scroller.scrollTo('myScrollToElement', {
duration: 1500,
delay: 100,
smooth: true,
})
Scroll More (px)
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollMore(10, options);
Scroll events
begin - start of the scrolling
var Scroll = require('react-scroll');
var Events = Scroll.Events;
Events.scrollEvent.register('begin', function(to, element) {
console.log("begin", to, element);
});
end - end of the scrolling/animation
Events.scrollEvent.register('end', function(to, element) {
console.log("end", to, element);
});
Remove events
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)
var React = require('react');
var Scroll = require('react-scroll');
var Helpers = Scroll.Helpers;
var Element = React.createClass({
render: function () {
return (
<div>
{this.props.children}
</div>
);
}
});
module.exports = Helpers.Element(Element);
var Link = React.createClass({
render: function () {
return (
<a>
{this.props.children}
</a>
);
}
});
module.exports = Helpers.Scroll(Link);
Changelog
v1.0.20
- Published, somehow the publish failed
v1.0.19
- Property warnings has now been removed.
v1.0.18
- It's now possible to scroll within a container, checkout the code under examples.
v1.0.17
- isDynamic property has been added. To allow scrollSpy to recalculate components that expand
Things that needs to be done - feel free to contribute.
- Being able to use react-scroll within a div.
- Integrate react-scroll with react-router
- Hash-scrolling.