React Scrollama
Install
React Scrollama can be installed as an npm package:
$ npm install react-scrollama2
Note: You must include the IntersectionObserver polyfill yourself for cross-browser support. Also consider including a position: sticky
polyfill.
Usage
A simple example with no frills.
;; state = data: 0 ; this; { const data = thisstate; return <div> <p>data: data</p> <Scrollama onStepEnter=thisonStepEnter> <Step data=1> <p>step 1</p> </Step> <Step data=2> <p>step 2</p> </Step> </Scrollama> </div> ; }
API
<Scrollama/>
Prop | Type | Default | Description |
---|---|---|---|
offset | number | 0.5 | How far from the top of the viewport to trigger a step. Value between 0 and 1. |
debug | bool | false | Whether to show visual debugging tools. |
onStepEnter | func | Callback that fires when the top or bottom edge of a step enters the offset threshold. | |
onStepExit | func | Callback that fires when the top or bottom edge of a step exits the offset threshold. |
The onStepEnter
and onStepExit
callbacks receive one argument, an object, with the following properties:
{
element, // The DOM node of the step that was triggered
data, // The data supplied to the step
direction, // 'up' or 'down'
}
<Step/>
Prop | Type | Default | Description |
---|---|---|---|
data | any | undefined | Data to be given to <Scrollama> callbacks when step triggered. |
children | PropTypes.node | N/A | Children must always be one component, not an array |
Features roadmap
- viewportAbove and viewportBelow intersection observers
- thresholds and progress
- preserving order
Contributing
You're welcome to contribute to React Scrollama. To setup the project:
- Fork and clone the repository.
npm install
in the library and theexample/
.npm start
in the library and theexample/
.
The docs page will then be served on http://localhost:8000/ in watch mode, meaning you don't have refresh the page to see your changes.
License
MIT