Skip to content

Commit 2446140

Browse files
jscottsmithjscottsmith
committed
rename x/y to translateX/translateY
1 parent f632e04 commit 2446140

File tree

8 files changed

+51
-41
lines changed

8 files changed

+51
-41
lines changed

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,25 +70,25 @@ function App() {
7070
}
7171
```
7272

73-
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).
73+
Then import the `Parallax` component and use it anywhere within the provider. Here's an example that will transform the element on the `translateY` axis starting at `-20%` and ending at `20%` (`translateY = [-20, 20]` \*percent is assumed with no provided unit).
7474

7575
```jsx
7676
import { Parallax } from 'react-scroll-parallax';
7777

7878
const VerticalParallax = () => (
79-
<Parallax y={[-20, 20]}>
79+
<Parallax translateY={[-20, 20]}>
8080
<div className="my-thing" />
8181
</Parallax>
8282
);
8383
```
8484

85-
Example with transforms on the `x` axis starting at `-100px` and ending at `200px` (`x = ['-100px', '200px']`).
85+
Example with transforms on the `translateX` axis starting at `-100px` and ending at `200px` (`translateX = ['-100px', '200px']`).
8686

8787
```jsx
8888
import { Parallax } from 'react-scroll-parallax';
8989

9090
const HorizontalParallax = () => (
91-
<Parallax x={['-100px', '200px']}>
91+
<Parallax translateX={['-100px', '200px']}>
9292
<div className="my-thing" />
9393
</Parallax>
9494
);

‎docs/parallax-component.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ const SlowAndFast = () => (
3030
If you need more fine tune control of the scroll position you can apply start and end transforms more directly. In this example the element begins with a `translateY(-20%)` and ends with `translateY(10%)`
3131

3232
```jsx
33-
const VerticalParallax = () => (
34-
<Parallax y={[-20, 10]}>
33+
const TranslateY = () => (
34+
<Parallax translateY={[-20, 10]}>
3535
<div className="my-thing" />
3636
</Parallax>
3737
);

‎src/components/Parallax.test.tsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ describe('Expect the <Parallax> component', () => {
3131
<Parallax
3232
className="class-foo"
3333
disabled={false}
34-
x={[-100, 100]}
35-
y={['-100%', '100%']}
34+
translateX={[-100, 100]}
35+
translateY={['-100%', '100%']}
3636
styleOuter={{
3737
border: 'solid red 2px',
3838
}}
@@ -67,7 +67,7 @@ describe('Expect the <Parallax> component', () => {
6767

6868
render(
6969
<MockProvider controllerMock={controller}>
70-
<Parallax y={[-100, 100]}>
70+
<Parallax translateY={[-100, 100]}>
7171
<div />
7272
</Parallax>
7373
</MockProvider>
@@ -144,7 +144,13 @@ describe('Expect the <Parallax> component', () => {
144144
wrapper: Wrapper,
145145
});
146146

147-
rerender(<Parallax disabled={false} x={[100, -100]} y={[-100, 100]} />);
147+
rerender(
148+
<Parallax
149+
disabled={false}
150+
translateX={[100, -100]}
151+
translateY={[-100, 100]}
152+
/>
153+
);
148154

149155
const element = controller.getElements()[0];
150156

@@ -157,7 +163,11 @@ describe('Expect the <Parallax> component', () => {
157163
const newProps = { disabled: false, x: [-40, -60], y: [10, 80] };
158164

159165
rerender(
160-
<Parallax disabled={newProps.disabled} x={newProps.x} y={newProps.y} />
166+
<Parallax
167+
disabled={newProps.disabled}
168+
translateX={newProps.x}
169+
translateY={newProps.y}
170+
/>
161171
);
162172

163173
expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
@@ -170,8 +180,8 @@ describe('Expect the <Parallax> component', () => {
170180
rerender(
171181
<Parallax
172182
disabled={newProps.disabled}
173-
x={newProps.x}
174-
y={newProps.y}
183+
translateX={newProps.x}
184+
translateY={newProps.y}
175185
// @ts-expect-error
176186
nope="bad"
177187
/>
@@ -198,13 +208,13 @@ describe('Expect the <Parallax> component', () => {
198208
const offY = [100, -100];
199209

200210
const { rerender } = render(
201-
<Parallax disabled={false} x={offX} y={offY} />,
211+
<Parallax disabled={false} translateX={offX} translateY={offY} />,
202212
{
203213
wrapper: Wrapper,
204214
}
205215
);
206216

207-
rerender(<Parallax disabled={true} x={offX} y={offY} />);
217+
rerender(<Parallax disabled={true} translateX={offX} translateY={offY} />);
208218

209219
expect(controller.resetElementStyles).toBeCalled();
210220
});

‎src/components/Parallax.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface ParallaxProps {
1313
*
1414
* Example:
1515
*
16-
* x={-1}
16+
* speed={-1}
1717
*
1818
*/
1919
speed?: number;
@@ -22,23 +22,23 @@ export interface ParallaxProps {
2222
*
2323
* Example:
2424
*
25-
* x={[-100, 100]}
25+
* translateX={[-100, 100]}
2626
*
2727
* First value is the starting translation
2828
* Second value is the ending translation
2929
*/
30-
x?: string[] | number[];
30+
translateX?: string[] | number[];
3131
/**
3232
* Start and end translation on y-axis in % or px. If no unit is passed percent is assumed. Percent is based on the elements height.
3333
*
3434
* Example:
3535
*
36-
* y={[-100, 100]}
36+
* translateY={[-100, 100]}
3737
*
3838
* First value is the starting translation
3939
* Second value is the ending translation
4040
*/
41-
y?: string[] | number[];
41+
translateY?: string[] | number[];
4242

4343
/**
4444
* Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
@@ -135,8 +135,8 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
135135
const isHorizontal = controller.scrollAxis == 'horizontal';
136136
const isVertical = controller.scrollAxis == 'vertical';
137137

138-
let translateX = props.x;
139-
let translateY = props.y;
138+
let translateX = props.translateX;
139+
let translateY = props.translateY;
140140

141141
if (useSpeedProp && isHorizontal) {
142142
translateX = [
@@ -191,8 +191,8 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
191191
}
192192
}, [
193193
props.disabled,
194-
props.x,
195-
props.y,
194+
props.translateX,
195+
props.translateY,
196196
props.rotate,
197197
props.rotateX,
198198
props.rotateY,

‎src/components/ParallaxBanner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const ParallaxBanner = ({
114114
return (
115115
<Parallax
116116
key={`layer-${i}`}
117-
y={[amount * -1 * 100 + '%', amount * 100 + '%']}
117+
translateY={[amount * -1 * 100 + '%', amount * 100 + '%']}
118118
styleInner={absoluteStyle}
119119
styleOuter={absoluteStyle}
120120
disabled={disabled}

‎stories/Parallax/1_ParallaxVertical.stories.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ export const WithYOffsets = (args) => {
3030
const b = args.y2.split(',');
3131
return (
3232
<Container scrollAxis="vertical" className={styles.elements}>
33-
<Parallax y={a} className={styles.parallax}>
33+
<Parallax translateY={a} className={styles.parallax}>
3434
<Element name="1" />
3535
</Parallax>
36-
<Parallax y={b} className={styles.parallax}>
36+
<Parallax translateY={b} className={styles.parallax}>
3737
<Element name="2" />
3838
</Parallax>
3939
</Container>
@@ -50,10 +50,10 @@ export const WithXOffsets = (args) => {
5050
const b = args.x2.split(',');
5151
return (
5252
<Container scrollAxis="vertical" className={styles.elements}>
53-
<Parallax x={a} className={styles.parallax}>
53+
<Parallax translateX={a} className={styles.parallax}>
5454
<Element name="1" />
5555
</Parallax>
56-
<Parallax x={b} className={styles.parallax}>
56+
<Parallax translateX={b} className={styles.parallax}>
5757
<Element name="2" />
5858
</Parallax>
5959
</Container>
@@ -72,10 +72,10 @@ export const WithXAndYOffsets = (args) => {
7272
const yb = args.y2.split(',');
7373
return (
7474
<Container scrollAxis="vertical" className={styles.elements}>
75-
<Parallax x={xa} y={ya} className={styles.parallax}>
75+
<Parallax translateX={xa} translateY={ya} className={styles.parallax}>
7676
<Element name="1" />
7777
</Parallax>
78-
<Parallax x={xb} y={yb} className={styles.parallax}>
78+
<Parallax translateX={xb} translateY={yb} className={styles.parallax}>
7979
<Element name="2" />
8080
</Parallax>
8181
</Container>
@@ -106,7 +106,7 @@ export const WithVaryingYOffsets = (args) => {
106106
<Parallax
107107
key={n}
108108
className={styles.smallLinear}
109-
y={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
109+
translateY={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
110110
>
111111
<Element name={n * -1} />
112112
</Parallax>
@@ -140,7 +140,7 @@ export const WithVaryingXOffsets = (args) => {
140140
<Parallax
141141
key={n}
142142
className={styles.smallLinear}
143-
x={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
143+
translateX={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
144144
>
145145
<Element name={n * -1} />
146146
</Parallax>
@@ -205,7 +205,7 @@ export const InsideADiv = () => {
205205
<Parallax
206206
key={n}
207207
className={styles.smallLinear}
208-
y={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
208+
translateY={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
209209
>
210210
<Element name={n * -1} />
211211
</Parallax>

‎stories/Parallax/2_ParallaxHorizontal.stories.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ export const WithXOffsets = (args) => {
3030
const b = args.x2.split(',');
3131
return (
3232
<Container scrollAxis="horizontal" className={styles.elementsHorizontal}>
33-
<Parallax x={a} className={styles.parallax}>
33+
<Parallax translateX={a} className={styles.parallax}>
3434
<Element name="1" />
3535
</Parallax>
36-
<Parallax x={b} className={styles.parallax}>
36+
<Parallax translateX={b} className={styles.parallax}>
3737
<Element name="2" />
3838
</Parallax>
3939
</Container>
@@ -52,10 +52,10 @@ export const WithXAndYOffsets = (args) => {
5252
const yb = args.y2.split(',');
5353
return (
5454
<Container scrollAxis="horizontal" className={styles.elementsHorizontal}>
55-
<Parallax x={xa} y={ya} className={styles.parallax}>
55+
<Parallax translateX={xa} y={ya} className={styles.parallax}>
5656
<Element name="1" />
5757
</Parallax>
58-
<Parallax x={xb} y={yb} className={styles.parallax}>
58+
<Parallax translateX={xb} y={yb} className={styles.parallax}>
5959
<Element name="2" />
6060
</Parallax>
6161
</Container>
@@ -124,7 +124,7 @@ export const WithVaryingXOffsets = (args) => {
124124
<Parallax
125125
key={n}
126126
className={styles.smallLinear}
127-
x={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
127+
translateX={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
128128
>
129129
<Element name={n * -1} />
130130
</Parallax>

‎stories/ScrollContainer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { PropsWithChildren } from 'react';
22
import { ParallaxProvider } from '../src';
3-
import { ValidScrollAxis } from '../src/types';
3+
import { ValidScrollAxis } from 'parallax-controller';
44

55
export const ScrollContainer = (
66
props: PropsWithChildren<{
7-
scrollAxis: ValidScrollAxis;
7+
scrollAxis?: ValidScrollAxis;
88
}>
99
) => {
1010
const [scrollEl, setScrollElement] = React.useState(null);

0 commit comments

Comments
 (0)