Skip to content

Commit e6b6753

Browse files
scottjr632scottjr632
committed
Updates RellaxOption interfeace
1 parent 30ab3a6 commit e6b6753

File tree

2 files changed

+144
-47
lines changed

2 files changed

+144
-47
lines changed

‎README.md‎

Lines changed: 76 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Import RellaxWrapper and wrap the component that you want to add the parralex fe
3838

3939
```js
4040
import RellaxWrapper from 'react-rellax-wrapper'
41-
# or
41+
// or
4242
import { RellaxWrapper } from 'react-rellax-wrapper'
4343
```
4444

@@ -67,49 +67,80 @@ If a prop is ommited it will default to the rellax's generic default. For exampl
6767
All traditional options for Rellax can also be used such as callback, center, and relativeToWrapper.
6868

6969
```ts
70-
interface RellaxWrapperProps extends Rellax.RellaxOptions {
71-
zIndex?: number
72-
percentage?: number
73-
speed?: number
74-
xs?: number
75-
mobile?: number
76-
tablet?: number
77-
desktop?: number
70+
interface RellaxWrapperProps {
71+
style?: React.CSSProperties;
72+
className?: string;
73+
zIndex?: number;
74+
75+
/**
76+
* Centered parallax elements in your viewport. 0.5 is centered.
77+
*/
78+
percentage?: number;
79+
80+
/**
81+
* Specify different speeds for xs devices
82+
*/
83+
xs?: number;
84+
85+
/**
86+
* Specify different speeds for mobile devices. Default breakpoint is 576.
87+
*/
88+
mobile?: number;
89+
90+
/**
91+
* Specify different speeds for tablets. Default breakpoint is 768.
92+
*/
93+
tablet?: number;
94+
95+
/**
96+
* Specify different speeds for desktop devices. Default breakpoint is 1201.
97+
*/
98+
desktop?: number;
99+
100+
/**
101+
* Will run on every animation event
102+
* @param positions Object with x and y positions of the rellax element
103+
*/
104+
callback?(positions: { x: number; y: number }): void;
105+
106+
/**
107+
* Enable the ability to center parallax elements in your viewport
108+
*/
109+
center?: boolean;
110+
111+
/**
112+
* Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically
113+
*/
114+
horizontal?: boolean;
115+
116+
/**
117+
* Allow decimal pixel values
118+
*/
119+
round?: boolean;
120+
121+
/**
122+
* A negative value will make it move slower than regular scrolling, and a positive value will make it move faster
123+
*/
124+
speed?: number;
125+
126+
/**
127+
* Enable vertical parallax
128+
*/
129+
vertical?: boolean;
130+
131+
/**
132+
* By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead
133+
*/
134+
wrapper?: string | HTMLElement;
135+
136+
/**
137+
* Do we want rellax element to be relative to the mentioned wrapper.
138+
*/
139+
relativeToWrapper?: boolean;
140+
141+
/**
142+
* Each breakpoint value represents the resolution for mobile, tablet, desktop respectively.
143+
*/
144+
breakpoints?: [number, number, number];
78145
}
79-
interface RellaxOptions {
80-
/**
81-
* Will run on every animation event
82-
* @param positions Object with x and y positions of the rellax element
83-
*/
84-
callback?(positions: { x: number; y: number }): void;
85-
/**
86-
* Enable the ability to center parallax elements in your viewport
87-
*/
88-
center?: boolean;
89-
/**
90-
* Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically
91-
*/
92-
horizontal?: boolean;
93-
/**
94-
* Allow decimal pixel values
95-
*/
96-
round?: boolean;
97-
/**
98-
* A negative value will make it move slower than regular scrolling, and a positive value will make it move faster
99-
*/
100-
speed?: number;
101-
/**
102-
* Enable vertical parallax
103-
*/
104-
vertical?: boolean;
105-
/**
106-
* By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead
107-
*/
108-
wrapper?: string | HTMLElement;
109-
/**
110-
* Do we want rellax element to be relative to the mentioned wrapper.
111-
*/
112-
relativeToWrapper?: boolean;
113-
}
114-
115146
```

‎src/rellaxWrapper.tsx‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,81 @@
11
import React, { FC, useState, useRef, useEffect } from 'react';
22
import Rellax from 'rellax';
33

4-
interface RellaxWrapperProps extends Rellax.RellaxOptions {
4+
interface RellaxWrapperProps {
5+
style?: React.CSSProperties;
56
className?: string;
67
zIndex?: number;
8+
9+
/**
10+
* Centered parallax elements in your viewport. 0.5 is centered.
11+
*/
712
percentage?: number;
13+
14+
/**
15+
* Specify different speeds for xs devices
16+
*/
817
xs?: number;
18+
19+
/**
20+
* Specify different speeds for mobile devices. Default breakpoint is 576.
21+
*/
922
mobile?: number;
23+
24+
/**
25+
* Specify different speeds for tablets. Default breakpoint is 768.
26+
*/
1027
tablet?: number;
28+
29+
/**
30+
* Specify different speeds for desktop devices. Default breakpoint is 1201.
31+
*/
1132
desktop?: number;
12-
style?: React.CSSProperties;
33+
34+
/**
35+
* Will run on every animation event
36+
* @param positions Object with x and y positions of the rellax element
37+
*/
38+
callback?(positions: { x: number; y: number }): void;
39+
40+
/**
41+
* Enable the ability to center parallax elements in your viewport
42+
*/
43+
center?: boolean;
44+
45+
/**
46+
* Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically
47+
*/
48+
horizontal?: boolean;
49+
50+
/**
51+
* Allow decimal pixel values
52+
*/
53+
round?: boolean;
54+
55+
/**
56+
* A negative value will make it move slower than regular scrolling, and a positive value will make it move faster
57+
*/
58+
speed?: number;
59+
60+
/**
61+
* Enable vertical parallax
62+
*/
63+
vertical?: boolean;
64+
65+
/**
66+
* By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead
67+
*/
68+
wrapper?: string | HTMLElement;
69+
70+
/**
71+
* Do we want rellax element to be relative to the mentioned wrapper.
72+
*/
73+
relativeToWrapper?: boolean;
74+
75+
/**
76+
* Each breakpoint value represents the resolution for mobile, tablet, desktop respectively.
77+
*/
78+
breakpoints?: [number, number, number];
1379
}
1480

1581
const RellaxWrapper: FC<RellaxWrapperProps> = ({

0 commit comments

Comments
 (0)