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.

rexmondo/react-snap-scroll