From e6b6753d14533d37c269c3e525cf0af998b707c6 Mon Sep 17 00:00:00 2001 From: Scott Richardson Date: Sat, 12 Dec 2020 15:20:50 -0600 Subject: [PATCH] Updates RellaxOption interfeace --- README.md | 121 ++++++++++++++++++++++++++---------------- src/rellaxWrapper.tsx | 70 +++++++++++++++++++++++- 2 files changed, 144 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index d037af6..885c212 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ Import RellaxWrapper and wrap the component that you want to add the parralex fe ```js import RellaxWrapper from 'react-rellax-wrapper' -# or +// or import { RellaxWrapper } from 'react-rellax-wrapper' ``` @@ -67,49 +67,80 @@ If a prop is ommited it will default to the rellax's generic default. For exampl All traditional options for Rellax can also be used such as callback, center, and relativeToWrapper. ```ts -interface RellaxWrapperProps extends Rellax.RellaxOptions { - zIndex?: number - percentage?: number - speed?: number - xs?: number - mobile?: number - tablet?: number - desktop?: number +interface RellaxWrapperProps { + style?: React.CSSProperties; + className?: string; + zIndex?: number; + + /** + * Centered parallax elements in your viewport. 0.5 is centered. + */ + percentage?: number; + + /** + * Specify different speeds for xs devices + */ + xs?: number; + + /** + * Specify different speeds for mobile devices. Default breakpoint is 576. + */ + mobile?: number; + + /** + * Specify different speeds for tablets. Default breakpoint is 768. + */ + tablet?: number; + + /** + * Specify different speeds for desktop devices. Default breakpoint is 1201. + */ + desktop?: number; + + /** + * Will run on every animation event + * @param positions Object with x and y positions of the rellax element + */ + callback?(positions: { x: number; y: number }): void; + + /** + * Enable the ability to center parallax elements in your viewport + */ + center?: boolean; + + /** + * Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically + */ + horizontal?: boolean; + + /** + * Allow decimal pixel values + */ + round?: boolean; + + /** + * A negative value will make it move slower than regular scrolling, and a positive value will make it move faster + */ + speed?: number; + + /** + * Enable vertical parallax + */ + vertical?: boolean; + + /** + * By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead + */ + wrapper?: string | HTMLElement; + + /** + * Do we want rellax element to be relative to the mentioned wrapper. + */ + relativeToWrapper?: boolean; + + /** + * Each breakpoint value represents the resolution for mobile, tablet, desktop respectively. + */ + breakpoints?: [number, number, number]; } -interface RellaxOptions { - /** - * Will run on every animation event - * @param positions Object with x and y positions of the rellax element - */ - callback?(positions: { x: number; y: number }): void; - /** - * Enable the ability to center parallax elements in your viewport - */ - center?: boolean; - /** - * Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically - */ - horizontal?: boolean; - /** - * Allow decimal pixel values - */ - round?: boolean; - /** - * A negative value will make it move slower than regular scrolling, and a positive value will make it move faster - */ - speed?: number; - /** - * Enable vertical parallax - */ - vertical?: boolean; - /** - * By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead - */ - wrapper?: string | HTMLElement; - /** - * Do we want rellax element to be relative to the mentioned wrapper. - */ - relativeToWrapper?: boolean; -} - ``` diff --git a/src/rellaxWrapper.tsx b/src/rellaxWrapper.tsx index fa4eda9..fab2a8d 100644 --- a/src/rellaxWrapper.tsx +++ b/src/rellaxWrapper.tsx @@ -1,15 +1,81 @@ import React, { FC, useState, useRef, useEffect } from 'react'; import Rellax from 'rellax'; -interface RellaxWrapperProps extends Rellax.RellaxOptions { +interface RellaxWrapperProps { + style?: React.CSSProperties; className?: string; zIndex?: number; + + /** + * Centered parallax elements in your viewport. 0.5 is centered. + */ percentage?: number; + + /** + * Specify different speeds for xs devices + */ xs?: number; + + /** + * Specify different speeds for mobile devices. Default breakpoint is 576. + */ mobile?: number; + + /** + * Specify different speeds for tablets. Default breakpoint is 768. + */ tablet?: number; + + /** + * Specify different speeds for desktop devices. Default breakpoint is 1201. + */ desktop?: number; - style?: React.CSSProperties; + + /** + * Will run on every animation event + * @param positions Object with x and y positions of the rellax element + */ + callback?(positions: { x: number; y: number }): void; + + /** + * Enable the ability to center parallax elements in your viewport + */ + center?: boolean; + + /** + * Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically + */ + horizontal?: boolean; + + /** + * Allow decimal pixel values + */ + round?: boolean; + + /** + * A negative value will make it move slower than regular scrolling, and a positive value will make it move faster + */ + speed?: number; + + /** + * Enable vertical parallax + */ + vertical?: boolean; + + /** + * By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead + */ + wrapper?: string | HTMLElement; + + /** + * Do we want rellax element to be relative to the mentioned wrapper. + */ + relativeToWrapper?: boolean; + + /** + * Each breakpoint value represents the resolution for mobile, tablet, desktop respectively. + */ + breakpoints?: [number, number, number]; } const RellaxWrapper: FC = ({