React Scroll
Component for animating vertical scrolling.
Install
$ npm install react-scroll
Run
$ npm install$ npm test$ npm start
Examples
Checkout examples
Live example
$ npm start
Usage
// ES6 Imports; // Or Access Link,Element,etc as followslet Link = ScrollLink;let Element = ScrollElement;let Events = ScrollEvents;let scroll = ScrollanimateScroll;let scrollSpy = ScrollscrollSpy; // ES5var React = ;var Scroll = ; var Link = ScrollLink;var Element = ScrollElement;var Events = ScrollEvents;var scroll = ScrollanimateScroll;var scrollSpy = ScrollscrollSpy; var Section = React; React;
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 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
<Link activeClass="active" to="target" spy=true smooth=true hashSpy=true offset=50 duration=500 delay=1000 isDynamic=true onSetActive=thishandleSetActive onSetInactive=thishandleSetInactive ignoreCancelEvents=false> Your name</Link>
Scroll Methods
Scroll To Top
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll To Bottom
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll To (position)
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll To (Element)
animateScroll.scrollTo(positionInPixels, props = {});
var Scroll = ;var Element = ScrollElement;var scroller = Scrollscroller; <Element name="myScrollToElement"></Element> // Somewhere else, even another filescroller
Scroll More (px)
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll events
begin - start of the scrolling
var Scroll = ;var Events = ScrollEvents; EventsscrollEvent;
end - end of the scrolling/animation
EventsscrollEvent;
Remove events
EventsscrollEvent;EventsscrollEvent;
Create your own Link/Element
Simply just pass your component to one of the high order components (Element/Scroll)
var React = ;var Scroll = ;var ScrollLink = ScrollScrollLink;var ScrollElement = ScrollScrollElement; var Element = React; moduleexports = ; var Link = React; moduleexports = ;
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
scroller
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
Changelog
1.7.9
- Set active now properly sets it's state after unmount and mount.
1.7.7
- Minor performance improvements
1.7.6
- Support targeting elements with className
1.7.5
- Improved performance.
1.7.0
- Deprecated Helpers.js
- Allow mulptiple scrolls
- Support es6/es5 imports.
1.6.5
- Refactored some logic regarding hashspy, now have to set containerId if you want to scroll a specific element.
1.6.3
- Simplified cancelation events
- Now possible to nest containers
1.6.1
- Ability to scroll overflown elements and using hashes for history.
1.5.5
- React v16 support
1.5.4
- Allows testing with jsdom and jest. Uses ref instead of findDOMNode
1.5.3
- Fixes react error
1.5.2
- Fixes the way everything is built and transformed with babel.
1.5.0
- Now using class and extending React.Component to match later versions of react.
v1.4.8
- Additional easings and animations added
v1.4.0
- It's now possible to nest scroll areas and get a callback when "link is active"
v1.3.0
- Remove directlink, now just use Link.
v1.2.0
- Now using passive event listeners.
v1.1.0
- now possible to set initial active link on componentDidMount ( see README or examples code )
- removed unnecessary events for scroll.
v1.0.24
- you can now pass any native property to Link/Element
- patched minor bugs from v1.0.21 > v1.0.24
v1.0.21
- scrollToBottom and scrollMore now works inside a container.
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