|
9 | 9 | React Scrollama is a simple and silky library for scrollytelling. It relies on IntersectionObserver and sticky positioning over scroll listeners. It is originally adapted from [Russel Samora's](https://russellsamora.github.io/) [Scrollama](https://github.com/russellgoldenberg/scrollama). |
10 | 10 |
|
11 | 11 | A few examples of ambitious interactive stories that were built with React Scrollama… |
| 12 | + |
12 | 13 | <table> |
13 | 14 | <tbody> |
14 | 15 | <tr> |
@@ -67,6 +68,7 @@ A live demo [lives here](https://jsonkao.github.io/react-scrollama). It was debu |
67 | 68 | ## Install |
68 | 69 |
|
69 | 70 | React Scrollama can be installed as an [npm package](https://www.npmjs.com/package/react-scrollama): |
| 71 | + |
70 | 72 | ``` |
71 | 73 | $ npm install react-scrollama |
72 | 74 | ``` |
@@ -138,14 +140,14 @@ React Scrollama components do not render into the DOM. They are meant to set up |
138 | 140 |
|
139 | 141 | These are the props you can set on the `Scrollama` component itself: |
140 | 142 |
|
141 | | -| Prop | Type | Default | Description | |
142 | | -|----------------|---------------------------|---------|-----------------------------------------------------------------------------------------| |
143 | | -| offset | `number` (from 0 to 1) or pixel value (e.g. "300px") | 0.3 | How far from the top of the viewport to trigger a step (as a proportion of view height) | |
144 | | -| threshold | `number` (greater than 1) | 4 | Granularity of the progress interval in pixels (smaller = more granular) | |
145 | | -| onStepEnter | `function` | | Callback that fires when the top or bottom edge of a step enters the offset threshold. | |
146 | | -| onStepExit | `function` | | Callback that fires when the top or bottom edge of a step exits the offset threshold. | |
147 | | -| onStepProgress | `function` | | Callback that fires the progress a step has made through the threshold. | |
148 | | -| debug | `boolean` | false | Whether to show visual debugging tools. | |
| 143 | +| Prop | Type | Default | Description | |
| 144 | +| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- | |
| 145 | +| offset | `number` (from 0 to 1) or pixel value (e.g. "300px") | 0.3 | How far from the top of the viewport to trigger a step (as a proportion of view height) | |
| 146 | +| threshold | `number` (greater than 1) | 4 | Granularity of the progress interval in pixels (smaller = more granular) | |
| 147 | +| onStepEnter | `function` | | Callback that fires when the top or bottom edge of a step enters the offset threshold. | |
| 148 | +| onStepExit | `function` | | Callback that fires when the top or bottom edge of a step exits the offset threshold. | |
| 149 | +| onStepProgress | `function` | | Callback that fires the progress a step has made through the threshold. | |
| 150 | +| debug | `boolean` | false | Whether to show visual debugging tools. | |
149 | 151 |
|
150 | 152 | The `onStepEnter` and `onStepExit` callbacks receive one argument, an object, with the following properties: |
151 | 153 |
|
@@ -179,36 +181,36 @@ A `Step` element can contain one child, which must be a DOM element. To use a Re |
179 | 181 | These are the props you can set on the `Step` component: |
180 | 182 |
|
181 | 183 | | Prop | Type | Default | Description | |
182 | | -|------|------|---------|------------------------------------------------------------------| |
| 184 | +| ---- | ---- | ------- | ---------------------------------------------------------------- | |
183 | 185 | | data | any | | Data to be given to `<Scrollama>` callbacks when step triggered. | |
184 | 186 |
|
185 | 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)). |
186 | 188 |
|
187 | 189 | ## Thank you to everyone who made this possible! |
188 | 190 |
|
189 | | -* [jsonkao](https://github.com/jsonkao) |
190 | | -* [maerzhase](https://github.com/maerzhase) |
191 | | -* [NicholasLYang](https://github.com/NicholasLYang) |
192 | | -* [jonesbp](https://github.com/jonesbp) |
193 | | -* [kennethormandy](https://github.com/kennethormandy) |
194 | | -* [cedricdelpoux](https://github.com/cedricdelpoux) |
195 | | -* [davidnmora](https://github.com/davidnmora) |
196 | | -* [jefffriesen](https://github.com/jefffriesen) |
197 | | -* [paolocorti](https://github.com/paolocorti) |
198 | | -* [elbertwang3](https://github.com/elbertwang3) |
199 | | -* [michaelgrotton](https://github.com/michaelgrotton) |
200 | | -* [jjrchrds](https://github.com/jjrchrds) |
201 | | -* [goleary](https://github.com/goleary) |
202 | | -* [danieleguido](https://github.com/danieleguido) |
203 | | -* [Lane](https://github.com/Lane) |
204 | | -* [jkjustjoshing](https://github.com/jkjustjoshing) |
205 | | -* [tuckergordon](https://github.com/tuckergordon) |
206 | | -* [fschwander](https://github.com/fschwander) |
207 | | -* [thisispaul](https://github.com/thisispaul) |
| 191 | +- [jsonkao](https://github.com/jsonkao) |
| 192 | +- [maerzhase](https://github.com/maerzhase) |
| 193 | +- [NicholasLYang](https://github.com/NicholasLYang) |
| 194 | +- [jonesbp](https://github.com/jonesbp) |
| 195 | +- [kennethormandy](https://github.com/kennethormandy) |
| 196 | +- [cedricdelpoux](https://github.com/cedricdelpoux) |
| 197 | +- [davidnmora](https://github.com/davidnmora) |
| 198 | +- [jefffriesen](https://github.com/jefffriesen) |
| 199 | +- [paolocorti](https://github.com/paolocorti) |
| 200 | +- [elbertwang3](https://github.com/elbertwang3) |
| 201 | +- [michaelgrotton](https://github.com/michaelgrotton) |
| 202 | +- [jjrchrds](https://github.com/jjrchrds) |
| 203 | +- [goleary](https://github.com/goleary) |
| 204 | +- [danieleguido](https://github.com/danieleguido) |
| 205 | +- [Lane](https://github.com/Lane) |
| 206 | +- [jkjustjoshing](https://github.com/jkjustjoshing) |
| 207 | +- [tuckergordon](https://github.com/tuckergordon) |
| 208 | +- [fschwander](https://github.com/fschwander) |
| 209 | +- [thisispaul](https://github.com/thisispaul) |
208 | 210 |
|
209 | 211 | ## Features roadmap |
210 | 212 |
|
211 | | -* 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). |
212 | | -* Fire previous step triggers if they were jumped |
| 213 | +- 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 | +- Fire previous step triggers if they were jumped |
213 | 215 |
|
214 | 216 | Lmk if you need these features ASAP. |
0 commit comments