Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1834bc9

Browse files
Merge branch 'master' into master
2 parents 02d0688 + a61ca52 commit 1834bc9

File tree

9 files changed

+286
-153
lines changed

9 files changed

+286
-153
lines changed

‎documentation/docs/usage/components/parallax-provider.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ The following props configure the `<ParallaxProvider>` component:
3838
| ------------------- | :-----------: | :--------- | ------------------------------------------------------------------------------------------------------------------------ |
3939
| **scrollAxis** | `string` | `vertical` | Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of `vertical` or `horizontal` |
4040
| **scrollContainer** | `HTMLElement` | `<body>` | Optionally set the container that has overflow and will contain parallax elements. Defaults to the document scroll body. |
41+
| **isDisabled** | `boolean` | `false` | Disables the ParallaxController and all animations. |
4142

4243
## More Examples
4344

@@ -83,3 +84,21 @@ const ScrollContainer = () => {
8384
);
8485
};
8586
```
87+
88+
### Disabling All Parallax Elements
89+
90+
With the `isDisabled` prop you may disable every parallax element in the provider when a condition is met, instead of individually. This can be helpful to disable parallax in certain situations like on mobile devices, or for users who [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). Elements will be re-enabled when `isDisabled` is `true`.
91+
92+
```tsx
93+
const App = () => {
94+
const userPrefersReducedMotion = useMediaQuery({
95+
query: '(prefers-reduced-motion)',
96+
});
97+
98+
return (
99+
<ParallaxProvider isDisabled={userPrefersReducedMotion}>
100+
{props.children}
101+
</ParallaxProvider>
102+
);
103+
};
104+
```

‎documentation/yarn.lock‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2707,9 +2707,9 @@
27072707
"@hapi/hoek" "^9.0.0"
27082708

27092709
"@sideway/formula@^3.0.0":
2710-
version "3.0.0"
2711-
resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c"
2712-
integrity sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg==
2710+
version "3.0.1"
2711+
resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f"
2712+
integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==
27132713

27142714
"@sideway/pinpoint@^2.0.0":
27152715
version "2.0.0"
@@ -5466,9 +5466,9 @@ htmlparser2@^8.0.1:
54665466
entities "^4.3.0"
54675467

54685468
http-cache-semantics@^4.0.0:
5469-
version "4.1.0"
5470-
resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
5471-
integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
5469+
version "4.1.1"
5470+
resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
5471+
integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
54725472

54735473
http-deceiver@^1.2.7:
54745474
version "1.2.7"
@@ -5923,9 +5923,9 @@ json-schema-traverse@^1.0.0:
59235923
integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
59245924

59255925
json5@^2.1.2, json5@^2.2.1:
5926-
version "2.2.1"
5927-
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
5928-
integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
5926+
version "2.2.3"
5927+
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
5928+
integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
59295929

59305930
jsonfile@^6.0.1:
59315931
version "6.1.0"
@@ -8421,9 +8421,9 @@ typedarray-to-buffer@^3.1.5:
84218421
is-typedarray "^1.0.0"
84228422

84238423
ua-parser-js@^0.7.30:
8424-
version "0.7.31"
8425-
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
8426-
integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
8424+
version "0.7.33"
8425+
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
8426+
integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
84278427

84288428
unherit@^1.0.4:
84298429
version "1.1.3"
@@ -8792,9 +8792,9 @@ webpack-sources@^3.2.2, webpack-sources@^3.2.3:
87928792
integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
87938793

87948794
webpack@^5.73.0:
8795-
version "5.74.0"
8796-
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
8797-
integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
8795+
version "5.76.1"
8796+
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.1.tgz#7773de017e988bccb0f13c7d75ec245f377d295c"
8797+
integrity sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==
87988798
dependencies:
87998799
"@types/eslint-scope" "^3.7.3"
88008800
"@types/estree" "^0.0.51"

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-scroll-parallax",
3-
"version": "3.3.2",
3+
"version": "3.4.0",
44
"description": "React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.",
55
"keywords": [
66
"react",
@@ -92,7 +92,7 @@
9292
}
9393
],
9494
"dependencies": {
95-
"parallax-controller": "^1.5.0"
95+
"parallax-controller": "^1.7.0"
9696
},
9797
"devDependencies": {
9898
"@babel/core": "^7.17.8",

‎src/components/ParallaxProvider/index.test.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,41 @@ describe('A <ParallaxProvider>', () => {
4848
expect(parallaxController).toBeInstanceOf(ParallaxController);
4949
});
5050

51+
it('to disable parallax elements and re-enable', () => {
52+
let parallaxController: ParallaxController | null = null;
53+
54+
const ContextChecker = () => {
55+
parallaxController = useParallaxController();
56+
if (parallaxController) {
57+
parallaxController.disableParallaxController = jest.fn();
58+
parallaxController.enableParallaxController = jest.fn();
59+
}
60+
return null;
61+
};
62+
63+
const context = render(
64+
<ParallaxProvider isDisabled>
65+
<ContextChecker />
66+
</ParallaxProvider>
67+
);
68+
69+
expect(
70+
// @ts-expect-error
71+
parallaxController.disableParallaxController
72+
).toBeCalled();
73+
74+
context.rerender(
75+
<ParallaxProvider>
76+
<ContextChecker />
77+
</ParallaxProvider>
78+
);
79+
80+
expect(
81+
// @ts-expect-error
82+
parallaxController.enableParallaxController
83+
).toBeCalled();
84+
});
85+
5186
it('to destroy the controller when unmounting', () => {
5287
const node = document.createElement('div');
5388

‎src/components/ParallaxProvider/index.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,27 @@ export class ParallaxProvider extends Component<ParallaxProviderProps, {}> {
2020
});
2121
}
2222

23+
componentDidMount() {
24+
if (this.props.isDisabled) {
25+
this.controller?.disableParallaxController();
26+
}
27+
}
28+
2329
componentDidUpdate(prevProps: ParallaxProviderProps) {
24-
if (prevProps.scrollContainer !== this.props.scrollContainer) {
25-
// @ts-ignore
26-
this.controller.updateScrollContainer(this.props.scrollContainer);
30+
if (
31+
prevProps.scrollContainer !== this.props.scrollContainer &&
32+
this.props.scrollContainer
33+
) {
34+
this.controller?.updateScrollContainer(this.props.scrollContainer);
35+
}
36+
37+
if (prevProps.isDisabled !== this.props.isDisabled) {
38+
if (this.props.isDisabled) {
39+
this.controller?.disableParallaxController();
40+
}
41+
if (!this.props.isDisabled) {
42+
this.controller?.enableParallaxController();
43+
}
2744
}
2845
}
2946

‎src/components/ParallaxProvider/types.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ export interface ParallaxProviderProps {
1111
* to the HTML body
1212
*/
1313
scrollContainer?: HTMLElement;
14-
14+
/**
15+
* Disables the ParallaxController and all animations.
16+
*/
17+
isDisabled?: boolean;
1518
children?: React.ReactNode;
1619
}

‎stories/Container.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
import { ScrollAxis } from 'parallax-controller';
21
import React from 'react';
32
import { PropsWithChildren } from 'react';
43
import { ParallaxProvider } from '../src';
4+
import { ParallaxProviderProps } from '../src/components/ParallaxProvider/types';
55

66
type ContainerProps = PropsWithChildren<{
7-
scrollAxis: ScrollAxis;
87
className?: string;
9-
}>;
8+
}> &
9+
ParallaxProviderProps;
1010

11-
export const Container = (props: ContainerProps) => (
12-
<ParallaxProvider scrollAxis={props.scrollAxis}>
11+
export const Container = ({
12+
className,
13+
children,
14+
...props
15+
}: ContainerProps) => (
16+
<ParallaxProvider {...props}>
1317
<div className={props.scrollAxis}>
14-
<div className={props.className}>{props.children}</div>
18+
<div className={className}>{children}</div>
1519
</div>
1620
</ParallaxProvider>
1721
);

‎stories/Parallax/1_ParallaxVertical.stories.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,32 @@ export const WithAHundredElements = () => {
215215
);
216216
};
217217

218+
export const WithParallaxElementsGloballyDisabled = (args) => {
219+
const amount = 100;
220+
const elements = new Array(amount).fill(null).map((x, i) => i);
221+
222+
return (
223+
<Container scrollAxis="vertical" isDisabled={args.isDisabled}>
224+
<div className={styles.elements}>
225+
{elements.map((_, i) => {
226+
const props: ParallaxProps = propConfigs[i % propConfigs.length];
227+
return (
228+
<div key={i} className={styles.small} style={{ perspective: 800 }}>
229+
<Parallax {...props}>
230+
<Element name={i + 1} />
231+
</Parallax>
232+
</div>
233+
);
234+
})}
235+
</div>
236+
</Container>
237+
);
238+
};
239+
240+
WithParallaxElementsGloballyDisabled.args = {
241+
isDisabled: true,
242+
};
243+
218244
export const InsideADiv = () => {
219245
const amount = 2;
220246
const offA = -50;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /