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

Demo

Take a look at the demo

Installation

React Scrollama can be installed as an npm package:

$ npm install react-scrollama

Basic Usage

A simple example with no frills.

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

class Graphic extends PureComponent {
  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}>
            step 1
          </Step>
          <Step data={2}>
            step 2
          </Step>
        </Scrollama>
      </div>      
    );
  }
}

Examples

Dynamic - Pushing and popping steps

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.

Contributing

You're welcome to contribute to React Scrollama. To setup the project:

Fork and clone the repository.
npm install
npm run dev

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