Skip to content

Commit ea48f55

Browse files
jscottsmithjscottsmith
committed
update README
1 parent f6819f0 commit ea48f55

File tree

1 file changed

+82
-94
lines changed

1 file changed

+82
-94
lines changed

‎README.md

Lines changed: 82 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ If you're coming from [v1](https://github.com/jscottsmith/react-scroll-parallax/
88

99
## Examples
1010

11-
- [Storybook](https://react-scroll-parallax-next.surge.sh)
12-
- [Demo 1](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/) - [Source](https://github.com/jscottsmith/react-scroll-parallax-examples)
13-
- [Demo 2](https://react-scroll-parallax.netlify.com/) - [Source](https://github.com/jscottsmith/react-parallax-site)
11+
- [Storybook](https://react-scroll-parallax-next.surge.sh)
12+
- [Demo 1](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/) - [Source](https://github.com/jscottsmith/react-scroll-parallax-examples)
13+
- [Demo 2](https://react-scroll-parallax.netlify.com/) - [Source](https://github.com/jscottsmith/react-parallax-site)
1414

1515
## Install
1616

@@ -28,48 +28,60 @@ yarn add react-scroll-parallax
2828

2929
## Overview
3030

31-
- [Usage](#usage)
32-
- [`<Parallax>`](#parallax)
33-
- [Parallax Props](#parallax-props)
34-
- [`<ParallaxBanner>`](#parallaxbanner)
35-
- [Banner Usage](#banner-usage)
36-
- [Banner Props](#banner-props)
37-
- [Banner Layers Prop](#banner-layers-prop)
38-
- [`<ParallaxProvider>`](#parallaxprovider)
39-
- [ParallaxProvider Props](#parallaxprovider-props)
40-
- [Parallax Controller Context](#parallax-controller-context)
41-
- [Available Methods](#available-methods)
42-
- [Browser Support](#browser-support)
43-
- [Optimizations to Reduce Jank](#optimizations-to-reduce-jank)
44-
- [PSA](#psa)
31+
- [Usage](#usage)
32+
- [`<Parallax>`](#parallax)
33+
- [Parallax Props](#parallax-props)
34+
- [`<ParallaxBanner>`](#parallaxbanner)
35+
- [Banner Usage](#banner-usage)
36+
- [Banner Props](#banner-props)
37+
- [Banner Layers Prop](#banner-layers-prop)
38+
- [`<ParallaxProvider>`](#parallaxprovider)
39+
- [ParallaxProvider Props](#parallaxprovider-props)
40+
- [Parallax Controller Context](#parallax-controller-context)
41+
- [Available Methods](#available-methods)
42+
- [Browser Support](#browser-support)
43+
- [Optimizations to Reduce Jank](#optimizations-to-reduce-jank)
44+
- [PSA](#psa)
4545

4646
## Usage
4747

48-
The [`<ParallaxProvider>`](#parallaxprovider) should wrap the component tree that contains all `<Parallax>` components. This should be a top level component like `<AppContainer>`. For example:
48+
The [`<ParallaxProvider>`](#parallaxprovider) must wrap the component tree that contains all `<Parallax>` components. This should be a top level component like `<App>`. For example:
4949

5050
```jsx
5151
import { ParallaxProvider } from 'react-scroll-parallax';
5252

53-
class AppContainer extends Component {
54-
render() {
55-
return (
56-
<ParallaxProvider>
57-
<App />
58-
</ParallaxProvider>
59-
);
60-
}
53+
function App() {
54+
render() {
55+
return (
56+
<ParallaxProvider>
57+
<AppRoutes />
58+
</ParallaxProvider>
59+
);
60+
}
6161
}
6262
```
6363

64-
Import the `Parallax` component and use it anywhere within the provider like so:
64+
Then import the `Parallax` component and use it anywhere within the provider. Here's an example that will transform the element on the `y` axis starting at `-20%` and ending at `20%` (`y = [-20, 20]` \*percent is assumed with no provided unit).
6565

6666
```jsx
6767
import { Parallax } from 'react-scroll-parallax';
6868

69-
const ParallaxImage = () => (
70-
<Parallax className="custom-class" y={[-20, 20]} tagOuter="figure">
71-
<Image src="/image.jpg" />
72-
</Parallax>
69+
const VerticalParallax = () => (
70+
<Parallax y={[-20, 20]}>
71+
<div className="my-thing" />
72+
</Parallax>
73+
);
74+
```
75+
76+
Example with transforms on the `x` axis starting at `-100px` and ending at `200px` (`x = ['-100px', '200px']`).
77+
78+
```jsx
79+
import { Parallax } from 'react-scroll-parallax';
80+
81+
const HorizontalParallax = () => (
82+
<Parallax x={['-100px', '200px']}>
83+
<div className="my-thing" />
84+
</Parallax>
7385
);
7486
```
7587

@@ -107,22 +119,22 @@ Use the `layers` prop to indicate all images, offset amounts, and scroll rates.
107119

108120
```jsx
109121
<ParallaxBanner
110-
className="your-class"
111-
layers={[
112-
{
113-
image: 'https://foo.com/foo.jpg',
114-
amount: 0.1,
115-
},
116-
{
117-
image: 'https://foo.com/bar.png',
118-
amount: 0.2,
119-
},
120-
]}
121-
style={{
122-
height: '500px',
123-
}}
122+
className="your-class"
123+
layers={[
124+
{
125+
image: 'https://foo.com/foo.jpg',
126+
amount: 0.1,
127+
},
128+
{
129+
image: 'https://foo.com/bar.png',
130+
amount: 0.2,
131+
},
132+
]}
133+
style={{
134+
height: '500px',
135+
}}
124136
>
125-
<h1>Banner Children</h1>
137+
<h1>Banner Children</h1>
126138
</ParallaxBanner>
127139
```
128140

@@ -155,11 +167,11 @@ The `<ParallaxProvider />` component is meant to wrap a top level component in y
155167

156168
```jsx
157169
const AppContainer = () => (
158-
<ParallaxProvider>
159-
<Router>
160-
<App />
161-
</Router>
162-
</ParallaxProvider>
170+
<ParallaxProvider>
171+
<Router>
172+
<App />
173+
</Router>
174+
</ParallaxProvider>
163175
);
164176
```
165177

@@ -174,38 +186,18 @@ The following props configure the `<ParallaxProvider>` component:
174186

175187
### Parallax Controller Context
176188

177-
Access the controller via [React context](https://facebook.github.io/react/docs/context.html) in any components rendered within a `<ParallaxProvider>` by using the `withController()` HOC:
178-
179-
```jsx
180-
181-
import { withController } from 'react-scroll-parallax';
189+
Access the controller via [React context](https://facebook.github.io/react/docs/context.html) in any components rendered within a `<ParallaxProvider>`.
182190

183-
class MyComponent extends Component {
184-
static propTypes = {
185-
parallaxController: PropTypes.object,
186-
};
187-
188-
doSomething() {
189-
const { parallaxController } = this.props;
190-
// do stuff with `parallaxController`
191-
}
192-
}
193-
194-
// Compose your component with the Higher Order Component
195-
export withController(MyComponent);
196-
197-
```
198-
199-
Also `parallaxController` is accessible using `useController()` [React hook](https://reactjs.org/docs/hooks-intro.html) in components without writing a class or wrapping them in HOC.
191+
This is accessible by using `useController()` [React hook](https://reactjs.org/docs/hooks-intro.html) in components without writing a class or wrapping them in HOC.
200192

201193
```jsx
202194
import { useController } from 'react-scroll-parallax';
203195

204196
const MyComponent = () => {
205-
const { parallaxController } = useController();
206-
// do stuff with `parallaxController`
197+
const parallaxController = useController();
207198

208-
return <div />;
199+
// do stuff with `parallaxController`
200+
return <div />;
209201
};
210202
```
211203

@@ -226,35 +218,31 @@ Removes window scroll and resize listeners then resets all styles applied to par
226218
The most common use case that would require access to the controller is dealing with images. Since the controller caches attributes for performance they will need to be updated with the correct values once the image loads. Here's an example of how you could do that with an `<Image />` component:
227219

228220
```jsx
229-
import { withController } from 'react-scroll-parallax';
221+
import { useController } from 'react-scroll-parallax';
230222

231-
class Image extends Component {
232-
handleLoad = () => {
233-
// updates cached values after image dimensions have loaded
234-
this.props.parallaxController.update();
235-
};
223+
function Image(props) {
224+
const parallaxController = useController();
236225

237-
render() {
238-
return <img src={this.props.src} onLoad={this.handleLoad} />;
239-
}
240-
}
226+
// updates cached values after image dimensions have loaded
227+
const handleLoad = () => parallaxController.update();
241228

242-
export withController(Image);
229+
return <img src={props.src} onLoad={handleLoad} />;
230+
}
243231
```
244232

245233
If your parallax components are stuck and acting weird, this is most likely due to the fact that your page initial scroll was not at the top on load. Here's a possible solution to this problem using `useController()` hook. It can be used in your application top level component or specifically in the part of your application where you are experiencing problems.
246234

247235
```jsx
248236
const ParallaxCache = () => {
249-
const { parallaxController } = useController();
237+
const parallaxController = useController();
250238

251-
useLayoutEffect(() => {
252-
const handler = () => parallaxController.update();
253-
window.addEventListener('load', handler);
254-
return () => window.removeEventListener('load', handler);
255-
}, [parallaxController]);
239+
useLayoutEffect(() => {
240+
const handler = () => parallaxController.update();
241+
window.addEventListener('load', handler);
242+
return () => window.removeEventListener('load', handler);
243+
}, [parallaxController]);
256244

257-
return null;
245+
return null;
258246
};
259247

260248
// <ParallaxCache /> now can be used anywhere you have problems with cached attributes

0 commit comments

Comments
 (0)