react-scrollama2
v1.0.0
Published
react-scrollama with SSR support.
Downloads
53
Maintainers
Readme
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.
import React, { Component } from 'react';
import { Scrollama, Step } from 'react-scrollama2';
class Graphic extends Component {
state = {
data: 0,
};
onStepEnter = ({ element, data, direction }) => this.setState({ data });
render() {
const { data } = this.state;
return (
<div>
<p>data: {data}</p>
<Scrollama onStepEnter={this.onStepEnter}>
<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