You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React Scrollama is a lightweight interface for scrollytelling in React. It is adapted from Russel Goldenbeg's [Scrollama](https://github.com/russellgoldenberg/scrollama), and it uses the [IntersectionObserver](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) instead of scroll events.
9
+
React Scrollama is a simple library for scrollytelling in React, utilizing the IntersectionObserver. It's adapted from [Russel Samora's](https://russellsamora.github.io/)[Scrollama](https://github.com/russellgoldenberg/scrollama).
13
10
14
-
As seen in:
11
+
Some examples:
15
12
<table>
16
13
<tbody>
17
14
<tr>
@@ -54,7 +51,7 @@ As seen in:
54
51
55
52
## Demo
56
53
57
-
Take a look at [the live demo](https://jsonkao.github.io/react-scrollama), presented at [ReactNYC](https://www.youtube.com/watch?v=zR_LDPLMUvE).
54
+
A live demo [lives here](https://jsonkao.github.io/react-scrollama), presented at [ReactNYC](https://www.youtube.com/watch?v=zR_LDPLMUvE).
58
55
59
56
<table>
60
57
<tr>
@@ -74,11 +71,11 @@ React Scrollama can be installed as an [npm package](https://www.npmjs.com/packa
74
71
$ npm install react-scrollama
75
72
```
76
73
77
-
**Note: As of version 2.2.0, the [IntersectionObserver polyfill](https://www.npmjs.com/package/intersection-observer)has been removed from the build. You must include it yourself for cross-browser support.** Check [here](https://caniuse.com/#feat=intersectionobserver) to see if you need to include the polyfill.
74
+
**Note: Version 2.2.0 removed the [IntersectionObserver polyfill](https://www.npmjs.com/package/intersection-observer) from the build. If you want [cross-browser support](https://caniuse.com/#feat=intersectionobserver), you should include it yourself.**
78
75
79
76
## Usage
80
77
81
-
A `Scrollama` component wraps a set of steps. Each `Step` component [must wrap a DOM element](https://github.com/jsonkao/react-scrollama/issues/19#issuecomment-624861326).
78
+
A `Scrollama` component wraps a set of steps. Each `Step` component [must](https://github.com/jsonkao/react-scrollama/issues/19#issuecomment-624861326) wrap a DOM element (i.e. not just text).
82
79
83
80
```jsx
84
81
<Scrollama onStepEnter={callback} offset={0.5}>
@@ -93,7 +90,7 @@ A `Scrollama` component wraps a set of steps. Each `Step` component [must wrap a
93
90
94
91
`<Scrollama>` provides an interface for listening in on scroll triggers like entering or exiting a step. (Here's [a full list](#scrollama) of available props.)
95
92
96
-
A no-frills example:
93
+
A basic example:
97
94
98
95
```jsx
99
96
importReact, { useState } from'react';
@@ -189,7 +186,7 @@ These are the props you can set on the `Step` component:
189
186
190
187
You will also probably want to set a `key` prop on each `Step` if you're transforming an array of data into a list of `Step` elements (see [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)).
191
188
192
-
## The contributors who made this possible
189
+
## Thank you to everyone who made this possible!
193
190
194
191
*[jsonkao](https://github.com/jsonkao)
195
192
*[maerzhase](https://github.com/maerzhase)
@@ -213,4 +210,4 @@ You will also probably want to set a `key` prop on each `Step` if you're transfo
213
210
* Currently, there is no way to throttle/customize React Scrollama's [resize listener](https://github.com/jsonkao/react-scrollama/blob/master/src/Scrollama.js#L104) 😢. We're working on this in [#44](https://github.com/jsonkao/react-scrollama/issues/44).
214
211
* Fire previous step triggers if they were jumped
215
212
216
-
If you need these features ASAP, let us know in issue!
0 commit comments