Updates RellaxOption interfeace

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;
-}
-
 ```

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<RellaxWrapperProps> = ({