Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1eae9b7

Browse files
docs: adding consistent imports and rewording headings for consistency
1 parent 04b5ba9 commit 1eae9b7

File tree

4 files changed

+47
-13
lines changed

4 files changed

+47
-13
lines changed

‎documentation/docs/usage/components/parallax-banner-component.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ sidebar_position: 3
66

77
Component that sets up layers of `useParallax` elements to achieve a parallaxing banner. Enables the layering of images, or custom markup, with scroll effects in a container that hides overflow.
88

9+
```tsx
10+
import { ParallaxBanner } from 'react-scroll-parallax';
11+
```
12+
913
### Working Demos
1014

1115
See some example [code with demos](/docs/examples/banners).

‎documentation/docs/usage/components/parallax-provider.md‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ sidebar_position: 2
66

77
The `<ParallaxProvider />` component is meant to wrap a root level component in your application and is necessary to provide access through the React context API to the [Parallax Controller](https://parallax-controller.vercel.app/docs/intro).
88

9-
## Basic Example
9+
```tsx
10+
import { ParallaxProvider } from 'react-scroll-parallax';
11+
```
12+
13+
## Examples
1014

1115
This component should only be used once in your app, for instance in an `<AppContainer />` component that won't be mounted/unmounted during route changes. Like so:
1216

1317
```tsx
14-
import { ParallaxProvider } from 'react-scroll-parallax';
15-
1618
const AppContainer = () => (
1719
<ParallaxProvider>
1820
<Router>
@@ -28,7 +30,7 @@ You can have multiple providers, however they will all be independent instances
2830

2931
:::
3032

31-
## ParallaxProvider Props
33+
## Props
3234

3335
The following props configure the `<ParallaxProvider>` component:
3436

@@ -37,9 +39,29 @@ The following props configure the `<ParallaxProvider>` component:
3739
| **scrollAxis** | `string` | `vertical` | Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of `vertical` or `horizontal` |
3840
| **scrollContainer** | `HTMLElement` | `<body>` | Optionally set the container that has overflow and will contain parallax elements. Defaults to the document scroll body. |
3941

40-
## Example: Scroll Container
42+
## More Examples
43+
44+
Using props you can configure the provider for the following conditions.
45+
46+
### Horizontal Scrolling
47+
48+
If your app's overflow is horizontal, you'll need to change the `scrollAxis`:
49+
50+
```tsx
51+
const AppContainer = () => (
52+
<ParallaxProvider scrollAxis="horizontal">
53+
<Router>
54+
<App />
55+
</Router>
56+
</ParallaxProvider>
57+
);
58+
```
59+
60+
### Scroll Container
61+
62+
By default the `<ParallaxProvider>` uses the document scrolling element. If your app's overflow is a unique element you need to provide the element as the `scrollContainer`.
4163

42-
By default the `<ParallaxProvider>` uses the document scrolling element. If your app's overflow is a unique element you need to provide the element as the `scrollContainer`. Here's how:
64+
Here's how you can do that using React hooks to set a `ref` to a DOM element. The `useEffect` will be called once after mounting then update state with the element to be passed to the provider.
4365

4466
```tsx title="ScrollContainer.tsx"
4567
import * as React from 'react';

‎documentation/docs/usage/hooks/use-parallax-controller.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,19 @@
22

33
This hook provides you access to the [`ParallaxController`](https://parallax-controller.vercel.app/docs/api/parallax-controller/) via [React context](https://facebook.github.io/react/docs/context.html). The hook must be called in a component rendered within the [`<ParallaxProvider>`](/docs/usage/components/parallax-provider). The most common usage of the controller is to update cache if the page layout has changed.
44

5-
## Example Usage For Images
5+
```tsx
6+
import { useParallaxController } from 'react-scroll-parallax';
7+
```
8+
9+
## Examples
10+
11+
The following are some common scenarios that occur where you may need to access and update the controller.
12+
13+
### Usage For Images
614

715
Updating the `ParallaxController` cache once an image loads:
816

917
```tsx
10-
import { useParallaxController } from 'react-scroll-parallax';
11-
1218
function Image(props) {
1319
const parallaxController = useParallaxController();
1420

@@ -19,7 +25,7 @@ function Image(props) {
1925
}
2026
```
2127

22-
## Example Route Change Hook
28+
### Example Route Change Hook
2329

2430
Another common use case is the need to update cache after a route changes. This custom hook updates the controller each time the location changes.
2531

‎documentation/docs/usage/hooks/use-parallax.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22

33
Main hook for applying parallax effects to a DOM element. Any of the documented [effects and configurations](https://parallax-controller.vercel.app/docs/usage/props) can be passed as params to the hook.
44

5-
## Example Usage
5+
```tsx
6+
import { useParallax } from 'react-scroll-parallax';
7+
```
8+
9+
## Example
610

711
To use the hook assign the `ref` returned to the element that you would like to apply effects to. Then provide the hook with the [prop configuration](https://parallax-controller.vercel.app/docs/usage/props) for the effects you need.
812

913
```tsx
10-
import { useParallax } from 'react-scroll-parallax';
11-
1214
function Component() {
1315
const props = { speed: 10 };
1416
const { ref } = useParallax<HTMLDivElement>(props);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /