# react-scrollama2

> react-scrollama with SSR support.

Latest version **1.0.0** (published 2019-12-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scrollama2
pnpm add react-scrollama2
yarn add react-scrollama2
bun add react-scrollama2
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-12-27 |
| First published | 2019-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 3 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Abhishek Warokar |
| Maintainers | abhibuilds |
| Keywords | react, scrollama, scrollytelling, IntersectionObserver, storytelling, react-scrollama, interactive, graphic |

## Links

- npm: https://www.npmjs.com/package/react-scrollama2
- Repository: https://github.com/apollonian/react-scrollama2
- Homepage: https://github.com/apollonian/react-scrollama2#readme
- Issues: https://github.com/apollonian/react-scrollama2/issues
- npm.io page: https://npm.io/package/react-scrollama2

## Dependencies (3)

- [react-jss](https://npm.io/package/react-jss.md) ^10.0.0
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.7.0
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-12-27

## README

# React Scrollama

## Install

React Scrollama can be installed as an [npm package](https://www.npmjs.com/package/react-scrollama2):
```
$ npm install react-scrollama2
```

**Note: You must include the [IntersectionObserver polyfill](https://www.npmjs.com/package/intersection-observer) yourself for cross-browser support. Also consider including a [`position: sticky` polyfill](https://github.com/dollarshaveclub/stickybits).**

## Usage

A simple example with no frills.

```js
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:
1. Fork and clone the repository.
2. `npm install` in the library and the `example/`.
3. `npm start` in the library and the `example/`.

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

---
_Source: https://npm.io/package/react-scrollama2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._