react-scrollama

React Scrollama

React Scrollama is a lightweight interface for scrollytelling that uses IntersectionObserver in favor of scroll events. It is adapted from Russel Goldenbeg's Scrollama.

As seen in:

• Lower-income undergraduate students are paying more and more to attend Columbia; wealthier students are paying less and less, federal data shows (Columbia Daily Spectator)
• The scramble to secure America’s voting machines (POLITICO)
• In Certain Science and Engineering Fields, Sex Diversity Among Graduate Students Is Stagnating. In Others, It’s Getting Worse. (Columbia Daily Spectator)

Demo

Take a look at the demo, presented at ReactNYC.

Install

React Scrollama can be installed as an npm package:

$ npm install react-scrollama

Note: As of version 2.2.0, the IntersectionObserver polyfill has been removed from the build. You must include it yourself for cross-browser support. Check here to see if you need to include the polyfill.

Usage

A no-frills example:

import React, { Component } from 'react';
import { Scrollama, Step } from 'react-scrollama';

class Graphic extends Component {
  state = {
    data: 0,
  };

  onStepEnter = ({ data }) => this.setState({ data });

  render() {
    const { data } = this.state;

    return (
      <div>
        <p style={{ position: 'sticky', top: 0 }}>data: {data}</p>
        <Scrollama onStepEnter={this.onStepEnter} debug>
          {[1, 2, 3, 4].map((d, i) => (
            <Step data={d} key={i}>
              <div style={{ margin: '50vh 0' }}>
                <p>
                  step index = {i}; data value = {d}
                </p>
              </div>
            </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.
progress	bool	false	Whether to fire incremental step progress updates or not
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.
onStepProgress	func		Callback that fires the progress a step has made through the 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'
}

The onStepProgress callback receives 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
  progress, // The percent of completion of the step (0 to 1)
}

<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

• Preserving order
• viewportAbove and viewportBelow intersection observers

Contributing

All contributions are welcome. To setup the project:

• Fork and clone the repository.
• npm install both in the library and the example/.
• npm start both in the library and the example/.

The docs page will then be served on http://localhost:3000.

To push the example build up to gh-pages, run npm run predeploy and npm run deploy.

Contributors

• jsonkao
• NicholasLYang
• jonesbp
• kennethormandy
• cedricdelpoux

License

MIT