Skip to content

Commit 39ff7c4

Browse files
committed
add migration guide
1 parent d60c7d7 commit 39ff7c4

File tree

2 files changed

+39
-2
lines changed

2 files changed

+39
-2
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
React components to create parallax scroll effects for banners, images or any other DOM elements. Uses a single scroll listener via [Parallax Controller](https://github.com/jscottsmith/parallax-controller) to add vertical or horizontal scrolling based offsets to elements based on their position in the viewport. [Optimized](https://github.com/jscottsmith/parallax-controller#optimizations-to-reduce-jank) to _reduce_ jank on scroll and works with universal (server-side rendered) React apps.
66

7-
If you're coming from [v1](https://github.com/jscottsmith/react-scroll-parallax/tree/v1), here's a [migration guide](https://github.com/jscottsmith/react-scroll-parallax/blob/master/docs/migration-guide.md).
7+
If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2.4.2), here's a [migration guide](https://github.com/jscottsmith/react-scroll-parallax/blob/master/docs/migration-guide.md).
88

99
## Examples
1010

docs/migration-guide.md

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,41 @@
1-
# Migration Guide
1+
# V2 Migration Guide
2+
3+
With mostly just new features, V3 also makes a few breaking changes. See the following and migrate any code that is affected.
4+
5+
### Renamed Props
6+
7+
If you've used any of the following props simply rename to the new ones.
8+
9+
1. `styleOuter` becomes `style`.
10+
2. `tagOuter` becomes `tag`.
11+
3. `x` becomes `translateX`.
12+
4. `y` becomes `translateY`.
13+
14+
### Using the context hook.
15+
16+
The hook to access the parallax controller is now returned directly.
17+
18+
If you used the following:
19+
20+
```js
21+
const { parallaxController } = useController();
22+
```
23+
24+
change it to:
25+
26+
```js
27+
const parallaxController = useController();
28+
```
29+
30+
### Removed default class names
31+
32+
If you relied on either the `parallax-outer` or `parallax-inner` class names for styling you will need to explicitly define them.
33+
34+
```jsx
35+
<Parallax className="parallax-outer" innerClassName="parallax-inner" />
36+
```
37+
38+
# V1 Migration Guide
239

340
Some breaking changes were introduced in v2. Here's the simple changes that need to be made if you're coming from v1.
441

0 commit comments

Comments
 (0)