react-snap-scroll

ReactSnapScroll

Introduction:

A React.js Component for "snap" scrolling between elements.

Install:

npm install react-snap-scroll --save
// Or
yarn add react-snap-scroll

Usage:

import ReactSnapScroll from 'react-snap-scroll';

const App = () => (
    <ReactSnapScroll transition="move-top-bottom">
        <div />
        <div />
        <div />
    </ReactSnapScroll>
);

Example Usage:

The examples folder contains an example use with create-react-app.

cd examples
yarn
yarn start

Props:

Property	Type	Default	Description
children	node, arrayOf(node)	isRequired	The elements to snap between.
start	number	0	The starting index of the Snapper.
indexChanged	func	f => f	Callback function when the Snapper changes indexes.
transition	string	"move-top-bottom"	The transition to apply on index changed.
orientation	string	"vertical"	The orientation of a scroll/swipe necessary to trigger an index change.
customTransition	string	null	A custom classname to use for the CSSTransition instead of one of the default animations.
customDuration	object	{ enter: 1000, exit: 1000 }	The timeout duration applied to the CSSTransition to manipulate the classes applied to the transitioning elements.

Built-in Transitions

• "move-top-bottom"
• "move-top-bottom-stagger"
• "scale-down-top-bottom"
• "scale-down-up"
• "fold-top-bottom"
• "cube-top-bottom"

These transitions come from here.

Additional Information:

If you're using the customTransition prop it is assumed you know your way around react-transition-group and its Component CSSTransition. The string defined in the customTransition prop will be suffixed with 'forward' and 'reverse' in order to create separate transitions in either direction.

Ex: customTransition="my-transition"

Classnames applied to the element that is appearing:

• .my-transition-forward-enter
• .my-transition-forward-enter-active
• .my-transition-forward-enter-done
• .my-transition-reverse-enter
• .my-transition-reverse-enter-active
• .my-transition-reverse-enter-done

Classnames applied to the element that is leaving:

• .my-transition-forward-exit
• .my-transition-forward-exit-active
• .my-transition-forward-exit-done
• .my-transition-reverse-exit
• .my-transition-reverse-exit-active
• .my-transition-reverse-exit-done

The enter and exit properties of the customDuration object will be applied to the timeout prop in CSSTransition. These values should match up with the animation duration + delay for the respective animation.