You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/usage/next-13.md
+9-8Lines changed: 9 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,19 @@
1
-
# Usage with NextJS
2
1
3
-
This will guide you through a way to setup `react-scroll-parallax` using the [Next 13](https://nextjs.org/blog/next-13) App router.
2
+
# Usage with Next.js
3
+
4
+
This guide will show you how to set up `react-scroll-parallax` using the [Next 13](https://nextjs.org/blog/next-13) App router.
4
5
5
6
## Setting Up the ParallaxProvider
6
7
7
-
[Next 13](https://nextjs.org/blog/next-13) requires client components to be marked with `use-client`, and the `ParallaxProvider` is a client component. In order to use the providers in your app, first create a `providers.tsx` file in the root of the app directory:
8
+
[Next 13](https://nextjs.org/blog/next-13) requires client components to be marked with `useclient`, and the `ParallaxProvider` is a client component. To use the providers in your app, first create a `providers.tsx` file in the root of the app directory:
8
9
9
10
```
10
11
next-app
11
12
└── app/
12
13
└── providers.tsx
13
14
```
14
15
15
-
In this file wrap the children in a `<ParallaxProvider>` and mark it as a client component.
16
+
In this file, wrap the children in a `<ParallaxProvider>` and mark it as a client component.
16
17
17
18
:::info
18
19
You may add any additional providers you need for your app here in the future.
@@ -39,7 +40,7 @@ next-app
39
40
└── layout.tsx
40
41
```
41
42
42
-
Your layout may differ from the one below — it is simplified for this example.
43
+
Your layout may differ from the one below — it's simplified for this example.
43
44
44
45
```tsx
45
46
import { Providers } from'./Providers';
@@ -61,7 +62,7 @@ export default function RootLayout({
61
62
62
63
## Create a Parallax Effect
63
64
64
-
Next we can create a simple parallax effect in another client component. Add a `test.tsx` file and place a parallax effect within it. We must also make this as a client component with `use client`.
65
+
Next, we can create a simple parallax effect in another client component. Add a `test.tsx` file and place a parallax effect within it. We must also make this a client component with `use client`.
65
66
66
67
```
67
68
next-app
@@ -88,7 +89,7 @@ export default function Test() {
88
89
89
90
### Use the Parallax within a Page
90
91
91
-
To add parallax effects to a page, create a `page.tsx` at the route you need. In this example we'll use the homepage so the page exists at the root of the app directory.
92
+
To add parallax effects to a page, create a `page.tsx` at the route you need. In this example, we'll use the homepage, so the page exists at the root of the app directory.
92
93
93
94
```
94
95
next-app
@@ -112,4 +113,4 @@ export default function Page() {
112
113
}
113
114
```
114
115
115
-
That's it. Now that `react-scroll-parallax` is working in your NextJS application you can add your own effects. See more on [how it works](/docs/examples/how-it-works).
116
+
That's it! Now that `react-scroll-parallax` is working in your Next.js application, you can add your own effects. See more on [how it works](/docs/examples/how-it-works).
0 commit comments