Package Exports

react-scrollama

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-scrollama) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Scrollama

React Scrollama is a simple interface for scrollytelling that uses IntersectionObserver in favor of scroll events. It is adapted from Russel Goldenbeg's Scrollama and was first introduced at React NYC: HyHNuVaZJ (watch the full talk here).

As seen on The Columbia Daily Spectator:

Demo

Take a look at the demo

Install

React Scrollama can be installed as an npm package:

$ npm install react-scrollama

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-scrollama';

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 the example/.
npm start in the library and the example/.

The docs page will then be served on http://localhost:3000/ in watch mode, meaning you don't have refresh the page to see your changes.

License

MIT