Skip to content

Commit b7e2658

Browse files
jscottsmithjscottsmith
committed
update README
1 parent ea48f55 commit b7e2658

File tree

2 files changed

+27
-29
lines changed

2 files changed

+27
-29
lines changed

‎README.md

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -98,16 +98,16 @@ The main component for manipulating a DOM element's position based on it's posit
9898

9999
The following are all props that can be passed to the `<Parallax>` component:
100100

101-
| Name | Type | Default | Description |
102-
| -------------- | :-----------------------------: | :------- | ------------------------------------------------------------------------------------------------------------------ |
103-
| **x** | `Array` of `String` or `Number` | `[0, 0]` | Offsets on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
104-
| **y** | `Array` of `String` or `Number` | `[0, 0]` | Offsets on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
105-
| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax element. |
106-
| **disabled** | `Boolean` | `false` | Disables parallax effects on individual elements when `true`. |
107-
| **styleInner** | `Object` | | Optionally pass a style object to be added to the innermost parallax element. |
108-
| **styleOuter** | `Object` | | Optionally pass a style object to be added to the outermost parallax element. |
109-
| **tagInner** | `String` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. |
110-
| **tagOuter** | `String` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. |
101+
| Name | Type | Default | Description |
102+
| -------------- | :----------------------: | :------- | ------------------------------------------------------------------------------------------------------------------------------------- |
103+
| **x** | `string[]` or `number[]` | `[0, 0]` | Start and end translation on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
104+
| **y** | `string[]` or `number[]` | `[0, 0]` | Start and end translation on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. |
105+
| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. |
106+
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
107+
| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. |
108+
| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. |
109+
| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. |
110+
| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. |
111111

112112
## \<ParallaxBanner>
113113

@@ -144,22 +144,22 @@ The following are all props that can be passed to the `<ParallaxBanner>` compone
144144

145145
| Name | Type | Default | Description |
146146
| ------------- | :-------: | :------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
147-
| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax banner element. |
148-
| **disabled** | `Boolean` | `false` | Determines if the internal parallax layers will have offsets applied. |
149-
| **layers** | `Array` | | A required `Array` of `Objects` with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`. [See layers prop below](#banner-layers-prop) |
150-
| **style** | `Object` | | Optionally pass a style object to be added to the outermost parallax banner element. |
147+
| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax banner element. |
148+
| **disabled** | `boolean` | `false` | Determines if the internal parallax layers will have offsets applied. |
149+
| **layers** | `array` | | A required `array` of `objects` with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`. [See layers prop below](#banner-layers-prop) |
150+
| **style** | `object` | | Optionally pass a style object to be added to the outermost parallax banner element. |
151151

152152
### Banner Layers Prop
153153

154154
The `layers` prop takes an array of objects that will represent each image (or custom children) of the parallax banner. The following properties describe a layer object:
155155

156-
| Name | Type | Default | Description |
157-
| ------------ | :-------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
158-
| **amount** | `Number` | | A value from `-1` to `1` that represents the vertical offset to be applied to the current layer, `0.1` would equal a `10%` offset on the top and bottom. |
159-
| **children** | `Element` | | Custom layer children provided as a React element, for example `<Video />` |
160-
| **expanded** | `Boolean` | `true` | Indicate if the layer should be expanded with negative top/bottom margins so the edges will never be visible. |
161-
| **image** | `String` | | Image source that will be applied as a CSS background image on the layer. |
162-
| **props** | `Object` | | Props to apply to the layer element. Example: `{ props: style: { background: 'red' }}` |
156+
| Name | Type | Default | Description |
157+
| ------------ | :------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
158+
| **amount** | `number` | | A value from `-1` to `1` that represents the vertical offset to be applied to the current layer, `0.1` would equal a `10%` offset on the top and bottom. |
159+
| **children** | `ReactElement` | | Custom layer children provided as a React element, for example `<Video />` |
160+
| **expanded** | `boolean` | `true` | Indicate if the layer should be expanded with negative top/bottom margins so the edges will never be visible. |
161+
| **image** | `string` | | Image source that will be applied as a CSS background image on the layer. |
162+
| **props** | `object` | | Props to apply to the layer element. Example: `{ props: style: { background: 'red' }}` |
163163

164164
## \<ParallaxProvider>
165165

@@ -179,10 +179,10 @@ const AppContainer = () => (
179179

180180
The following props configure the `<ParallaxProvider>` component:
181181

182-
| Name | Type | Default | Description |
183-
| ------------------- | :-------: | :--------- | ------------------------------------------------------------------------------------------------------------ |
184-
| **scrollAxis** | `String` | `vertical` | Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of `vertical` or `horizontal` |
185-
| **scrollContainer** | `Element` | `<body>` | Optionally set the container that has overflow and will contain parallax elements. Defaults to the HTML body |
182+
| Name | Type | Default | Description |
183+
| ------------------- | :-----------: | :--------- | ------------------------------------------------------------------------------------------------------------ |
184+
| **scrollAxis** | `string` | `vertical` | Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of `vertical` or `horizontal` |
185+
| **scrollContainer** | `HTMLElement` | `<body>` | Optionally set the container that has overflow and will contain parallax elements. Defaults to the HTML body |
186186

187187
### Parallax Controller Context
188188

‎src/components/Parallax.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import { useController } from '../hooks/useController';
88

99
export interface ParallaxProps {
1010
/**
11-
* Start and end translation on x-axis in % or px. If no unit is passed percent is assumed. Percent is based on
12-
* the elements width.
11+
* Start and end translation on x-axis in % or px. If no unit is passed percent is assumed. Percent is based on the elements width.
1312
*
1413
* Example:
1514
*
@@ -20,8 +19,7 @@ export interface ParallaxProps {
2019
*/
2120
x?: string[] | number[];
2221
/**
23-
* Start and end translation on y-axis in % or px. If no unit is passed percent is assumed. Percent is based on
24-
* the elements height.
22+
* Start and end translation on y-axis in % or px. If no unit is passed percent is assumed. Percent is based on the elements height.
2523
*
2624
* Example:
2725
*

0 commit comments

Comments
 (0)