Skip to content

Commit 45e7090

Browse files
tucker-gordon-bahtucker-gordon-bah
committed
Add prettier
1 parent 61e358b commit 45e7090

File tree

11 files changed

+126
-86
lines changed

11 files changed

+126
-86
lines changed

‎README.md‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
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).
1010

1111
A few examples of ambitious interactive stories that were built with React Scrollama…
12+
1213
<table>
1314
<tbody>
1415
<tr>
@@ -67,6 +68,7 @@ A live demo [lives here](https://jsonkao.github.io/react-scrollama). It was debu
6768
## Install
6869

6970
React Scrollama can be installed as an [npm package](https://www.npmjs.com/package/react-scrollama):
71+
7072
```
7173
$ npm install react-scrollama
7274
```
@@ -138,14 +140,14 @@ React Scrollama components do not render into the DOM. They are meant to set up
138140

139141
These are the props you can set on the `Scrollama` component itself:
140142

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

150152
The `onStepEnter` and `onStepExit` callbacks receive one argument, an object, with the following properties:
151153

@@ -179,36 +181,36 @@ A `Step` element can contain one child, which must be a DOM element. To use a Re
179181
These are the props you can set on the `Step` component:
180182

181183
| Prop | Type | Default | Description |
182-
|------|------|---------|------------------------------------------------------------------|
184+
| ---- | ---- | ------- | ---------------------------------------------------------------- |
183185
| data | any | | Data to be given to `<Scrollama>` callbacks when step triggered. |
184186

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

187189
## Thank you to everyone who made this possible!
188190

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

209211
## Features roadmap
210212

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
213215

214216
Lmk if you need these features ASAP.

‎example/public/index.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
@@ -37,7 +37,11 @@
3737
<style>
3838
body {
3939
margin: 0;
40-
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
40+
font-family:
41+
Helvetica Neue,
42+
Helvetica,
43+
Arial,
44+
sans-serif;
4145
padding-bottom: 100px;
4246
}
4347

@@ -52,9 +56,7 @@
5256
</head>
5357

5458
<body>
55-
<noscript>
56-
You need to enable JavaScript to run this app.
57-
</noscript>
59+
<noscript> You need to enable JavaScript to run this app. </noscript>
5860

5961
<div id="root"></div>
6062
</body>

‎example/src/Demo.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ class Demo extends PureComponent {
134134
};
135135

136136
onStepEnter = e => {
137-
const { data, entry, direction} = e;
137+
const { data, entry, direction } = e;
138138
this.setState({ data });
139139
};
140140

‎example/src/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom/client';
33
import Demo from './Demo';
44

55
const root = ReactDOM.createRoot(document.getElementById('root'));
6-
root.render(<Demo />)
6+
root.render(<Demo />);

‎package-lock.json‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@
2828
"scripts": {
2929
"build": "rollup -c",
3030
"start": "rollup -c -w",
31+
"check": "npm run check:format && npm run check:lint",
32+
"check:lint": "eslint . --report-unused-disable-directives",
33+
"check:format": "prettier --write .",
3134
"prepublishOnly": "npm run build",
3235
"predeploy": "cd example && npm install && npm run build",
3336
"deploy": "gh-pages -d example/build",
@@ -55,6 +58,7 @@
5558
"eslint-plugin-react": "^7.37.4",
5659
"gh-pages": "^6.3.0",
5760
"globals": "^16.0.0",
61+
"prettier": "^3.5.1",
5862
"rollup": "^2.76.0",
5963
"rollup-plugin-peer-deps-external": "^2.2.4"
6064
},

‎rollup.config.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,8 @@ export default {
2222
peerDepsExternal(),
2323
babel({
2424
babelrc: false,
25-
presets: [
26-
['@babel/preset-env', { modules: false }],
27-
'@babel/react',
28-
],
29-
plugins: [
30-
'@babel/plugin-proposal-class-properties',
31-
],
25+
presets: [['@babel/preset-env', { modules: false }], '@babel/react'],
26+
plugins: ['@babel/plugin-proposal-class-properties'],
3227
exclude: 'node_modules/**',
3328
}),
3429
resolve(),

‎src/DebugOffset.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,20 @@ const offsetTextStyles = {
1818

1919
const useTop = offset => {
2020
const offsetInPixels = isOffsetInPixels(offset);
21-
if(offsetInPixels) {
21+
if (offsetInPixels) {
2222
return offset;
2323
} else {
24-
return `${offset * 100}%`
24+
return `${offset * 100}%`;
2525
}
26-
}
26+
};
2727

2828
const DebugOffset = ({ offset }) => {
2929
const top = useTop(offset);
3030
return (
31-
<div style={{ ...markerStyles, top, }}>
31+
<div style={{ ...markerStyles, top }}>
3232
<p style={offsetTextStyles}>trigger: {offset}</p>
3333
</div>
3434
);
35-
}
35+
};
3636

3737
export default DebugOffset;

‎src/Scrollama.jsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,35 +22,38 @@ const Scrollama = props => {
2222
onStepProgress = null,
2323
threshold = 4,
2424
} = props;
25-
const isOffsetDefinedInPixels = isOffsetInPixels(offset)
25+
const isOffsetDefinedInPixels = isOffsetInPixels(offset);
2626
const [lastScrollTop, setLastScrollTop] = useState(0);
2727
const [windowInnerHeight, setWindowInnerHeight] = useState(null);
2828

29-
const handleSetLastScrollTop = (scrollTop) => {
29+
const handleSetLastScrollTop = scrollTop => {
3030
setLastScrollTop(scrollTop);
3131
};
3232

33-
const handleWindowResize = (e) => {
34-
setWindowInnerHeight(window.innerHeight)
35-
}
33+
const handleWindowResize = e => {
34+
setWindowInnerHeight(window.innerHeight);
35+
};
3636

3737
React.useEffect(() => {
38-
if(isOffsetDefinedInPixels) {
38+
if (isOffsetDefinedInPixels) {
3939
window.addEventListener('resize', handleWindowResize);
4040
return () => {
4141
window.removeEventListener('resize', handleWindowResize);
4242
};
4343
}
4444
}, []);
4545

46-
const isBrowser = typeof window !== "undefined";
47-
const innerHeight = isBrowser ? (windowInnerHeight || window.innerHeight) : 0;
46+
const isBrowser = typeof window !== 'undefined';
47+
const innerHeight = isBrowser ? windowInnerHeight || window.innerHeight : 0;
4848

4949
const offsetValue = isOffsetDefinedInPixels
50-
? (+offset.replace('px', '') / innerHeight)
50+
? +offset.replace('px', '') / innerHeight
5151
: offset;
5252

53-
const progressThreshold = useMemo(() => createThreshold(threshold, innerHeight), [innerHeight]);
53+
const progressThreshold = useMemo(
54+
() => createThreshold(threshold, innerHeight),
55+
[innerHeight],
56+
);
5457

5558
return (
5659
<React.Fragment>
@@ -65,7 +68,7 @@ const Scrollama = props => {
6568
lastScrollTop,
6669
handleSetLastScrollTop,
6770
progressThreshold,
68-
innerHeight
71+
innerHeight,
6972
});
7073
})}
7174
</React.Fragment>

0 commit comments

Comments
 (0)