Skip to content

Commit d60c7d7

Browse files
jscottsmithjscottsmith
committed
add innerClassName and rename props for consistency
1 parent 4970f93 commit d60c7d7

File tree

7 files changed

+29
-32
lines changed

7 files changed

+29
-32
lines changed

‎docs/parallax-component.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,13 @@ The following are all props that can be passed to the `<Parallax>` component:
5656
| **speed** | `number` | | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster. |
5757
| **easing** | `string` or `number[]` | | String representing an [easing preset](#easing-presets) or array of params to supply to a [cubic bezier easing function](#cubic-bezier-easing-function). |
5858
| **rootMargin** | `object` | | Margin to be applied as the bounds around an element. This will affect when an element is determined to be considered in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
59-
| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. |
6059
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
61-
| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. |
62-
| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. |
63-
| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. |
64-
| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. |
60+
| **className** | `string` | | Class names to be added to the outermost parallax element. |
61+
| **innerClassName** | `string` | | Class names to be added to the outermost parallax element. |
62+
| **style** | `object` | | Style object to be added to the outermost parallax element. |
63+
| **innerStyle** | `object` | | Style object to be added to the innermost parallax element. |
64+
| **tag** | `string` | `div` | HTML element tag name to be applied to the outermost parallax element. |
65+
| **innerTag** | `string` | `div` | HTML element tag name to be applied to the innermost parallax element. |
6566
| **shouldStartAnimationInitialInView** | `boolean` | `false` | Will start the animation at initial element position if the element is positioned inside the view when scroll is at zero. |
6667

6768
### Props: CSS Effects

‎src/components/Parallax/__snapshots__/index.test.tsx.snap

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@
33
exports[`Expect the <Parallax> component to render correctly 1`] = `
44
<DocumentFragment>
55
<figure
6-
class="parallax-outer class-foo"
6+
class="class-foo"
77
style="border: 2px solid red;"
88
>
99
<div
10-
class="parallax-inner"
1110
style="border: 2px solid blue; will-change: transform,opacity; transform: translateX(100%)translateY(100%);"
1211
>
1312
<div

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ describe('Expect the <Parallax> component', () => {
3333
disabled={false}
3434
translateX={[-100, 100]}
3535
translateY={['-100%', '100%']}
36-
styleOuter={{
36+
style={{
3737
border: 'solid red 2px',
3838
}}
3939
styleInner={{
4040
border: 'solid blue 2px',
4141
}}
42-
tagOuter="figure"
42+
tag="figure"
4343
tagInner="div"
4444
>
4545
<div className="foo" />

‎src/components/Parallax/index.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -108,15 +108,16 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
108108
props.onExit,
109109
]);
110110

111-
const Outer = props.tagOuter;
111+
const Outer = props.tag;
112112
const Inner = props.tagInner;
113113

114-
const rootClass =
115-
'parallax-outer' + (props.className ? ` ${props.className}` : '');
116-
117114
return (
118-
<Outer className={rootClass} ref={refOuter} style={props.styleOuter}>
119-
<Inner className="parallax-inner" ref={refInner} style={props.styleInner}>
115+
<Outer className={props.className} ref={refOuter} style={props.style}>
116+
<Inner
117+
className={props.innerClassName}
118+
ref={refInner}
119+
style={props.styleInner}
120+
>
120121
{props.children}
121122
</Inner>
122123
</Outer>
@@ -126,5 +127,5 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
126127
Parallax.defaultProps = {
127128
disabled: false,
128129
tagInner: 'div',
129-
tagOuter: 'div',
130+
tag: 'div',
130131
};

‎src/components/Parallax/types.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -152,29 +152,33 @@ export interface ParallaxProps {
152152
*/
153153
shouldStartAnimationInitialInView?: boolean;
154154
/**
155-
* Optionally pass additional class names to be added to the outermost parallax element.
155+
* Class names to be added to the outermost parallax element.
156156
*/
157157
className?: string;
158+
/**
159+
* Class names to be added to the outermost parallax element.
160+
*/
161+
innerClassName?: string;
158162
/**
159163
* Disables parallax effects on individual elements when true.
160164
*/
161165
disabled?: boolean;
162166
/**
163-
* Optionally pass a style object to be added to the innermost parallax element.
167+
* Style object to be added to the innermost parallax element.
164168
*/
165169
styleInner?: any;
166170
/**
167-
* Optionally pass a style object to be added to the outermost parallax element.
171+
* Style object to be added to the outermost parallax element.
168172
*/
169-
styleOuter?: any;
173+
style?: any;
170174
/**
171-
* Optionally pass an element tag name to be applied to the innermost parallax element.
175+
* HTML element tag name to be applied to the innermost parallax element.
172176
*/
173177
tagInner?: any;
174178
/**
175-
* Optionally pass an element tag name to be applied to the outermost parallax element.
179+
* HTML element tag name to be applied to the outermost parallax element.
176180
*/
177-
tagOuter?: any;
181+
tag?: any;
178182

179183
/**
180184
* Callback for when the progress of an element in the viewport changes.

‎src/components/ParallaxBanner/__snapshots__/index.test.tsx.snap

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ exports[`Expect the <ParallaxBanner> component to render custom child banners co
1515
}
1616
>
1717
<div
18-
className="parallax-outer"
1918
style={
2019
Object {
2120
"bottom": 0,
@@ -27,7 +26,6 @@ exports[`Expect the <ParallaxBanner> component to render custom child banners co
2726
}
2827
>
2928
<div
30-
className="parallax-inner"
3129
style={
3230
Object {
3331
"bottom": 0,
@@ -74,7 +72,6 @@ exports[`Expect the <ParallaxBanner> component to render image banners correctly
7472
}
7573
>
7674
<div
77-
className="parallax-outer"
7875
style={
7976
Object {
8077
"bottom": 0,
@@ -86,7 +83,6 @@ exports[`Expect the <ParallaxBanner> component to render image banners correctly
8683
}
8784
>
8885
<div
89-
className="parallax-inner"
9086
style={
9187
Object {
9288
"bottom": 0,
@@ -135,7 +131,6 @@ exports[`Expect the <ParallaxBanner> component to render layers with custom prop
135131
}
136132
>
137133
<div
138-
className="parallax-outer"
139134
style={
140135
Object {
141136
"bottom": 0,
@@ -147,7 +142,6 @@ exports[`Expect the <ParallaxBanner> component to render layers with custom prop
147142
}
148143
>
149144
<div
150-
className="parallax-inner"
151145
style={
152146
Object {
153147
"bottom": 0,
@@ -190,7 +184,6 @@ exports[`Expect the <ParallaxBanner> component to render without expanded margin
190184
}
191185
>
192186
<div
193-
className="parallax-outer"
194187
style={
195188
Object {
196189
"bottom": 0,
@@ -202,7 +195,6 @@ exports[`Expect the <ParallaxBanner> component to render without expanded margin
202195
}
203196
>
204197
<div
205-
className="parallax-inner"
206198
style={
207199
Object {
208200
"bottom": 0,

‎src/components/ParallaxBanner/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const ParallaxBanner = ({
7474
key={`layer-${i}`}
7575
speed={speed}
7676
styleInner={absoluteStyle}
77-
styleOuter={absoluteStyle}
77+
style={absoluteStyle}
7878
disabled={disabled}
7979
>
8080
<div

0 commit comments

Comments
 (0)