Skip to content

Commit 10f8ed1

Browse files
committed
docs: update readme
1 parent f1f56be commit 10f8ed1

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[![npm version](https://badge.fury.io/js/react-scroll-parallax.svg)](https://badge.fury.io/js/react-scroll-parallax) [![Build Status](https://travis-ci.org/jscottsmith/react-scroll-parallax.svg?branch=master)](https://travis-ci.org/jscottsmith/react-scroll-parallax) [![codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/master/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax)
44

5-
React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes[Parallax Controller](https://github.com/jscottsmith/parallax-controller) to add vertical or horizontal scrolling based effects to elements. [Optimized](https://parallax-controller.vercel.app/docs/performance) to _reduce_ jank on scroll and works with SSR and SSG rendered React apps.
5+
React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes [Parallax Controller](https://github.com/jscottsmith/parallax-controller) to add vertical or horizontal scrolling based effects to elements. [Optimized](https://parallax-controller.vercel.app/docs/performance) to _reduce_ jank on scroll and works with SSR and SSG rendered React apps.
66

77
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

@@ -46,6 +46,8 @@ yarn add react-scroll-parallax
4646

4747
## Usage
4848

49+
### Wrap with a ParallaxProvider
50+
4951
The [`<ParallaxProvider>`](#parallaxprovider) must wrap the component tree that contains all `<Parallax>` components. This should be a top level component like `<App>`. For example:
5052

5153
```jsx
@@ -62,6 +64,8 @@ function App() {
6264
}
6365
```
6466

67+
### Create effects with useParallax()
68+
6569
Then import the `useParallax` hook and use it anywhere within the provider. Here's an example that uses the `speed` prop so simply speed up (or slowdown) the rate of scroll.
6670

6771
```jsx
@@ -73,6 +77,8 @@ const Component = () => {
7377
};
7478
```
7579

80+
### Create effects with \<Parallax>
81+
7682
You can also use the `Parallax` component. Here's an example that will transform the element on the `translateY` axis starting at `-20%` and ending at `20%` (`translateY = [-20, 20]` \*percent is assumed with no provided unit).
7783

7884
```jsx

0 commit comments

Comments
 (0)