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.

As seen in:

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.
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

License

MIT