add event callbacks

Author: jscottsmith

docs/parallax-component.md

@@ -87,7 +87,7 @@ The **_end_** of an effect begins when the element's original position exits the
 | **scaleZ**     |        `number[]`        | Start and end scale on z-axis.                                                                                                        |
 | **opacity**    |        `number[]`        | Start and end opacity value.                                                                                                          |
 
-### Easing Presets
+#### Easing Presets
 
 The following easing values are preset and can be used as easing
 
@@ -126,10 +126,18 @@ easeOutBack
 easeInOutBack
 ```
 
-### Cubic Bezier Easing Function
+#### Cubic Bezier Easing Function
 
 Just like with CSS `cubic-bezier(0.2,-0.67,1,-0.62);`, you can supply the 4 params to a custom bezier function.
 
 ```jsx
 <Parallax easing={[0.2, -0.6, 1, -0.6]} />
 ```
+
+### Props: Callbacks
+
+| Name                 |    Type    | Description                                                           |
+| -------------------- | :--------: | --------------------------------------------------------------------- |
+| **onProgressChange** | `function` | Callback for when the progress of an element in the viewport changes. |
+| **onEnter**          | `function` | Callback for when an element enters the viewport.                     |
+| **onExit**           | `function` | Callback for when an element exits the viewport.                      |

package.json

@@ -74,7 +74,7 @@
     }
   ],
   "dependencies": {
-    "parallax-controller": "0.1.22"
+    "parallax-controller": "0.1.23"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

src/components/Parallax/index.tsx

@@ -52,6 +52,9 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         opacity: props.opacity,
         easing: props.easing,
         rootMargin: props.rootMargin,
+        onProgressChange: props.onProgressChange,
+        onEnter: props.onEnter,
+        onExit: props.onExit,
       }),
     };
   }
@@ -94,6 +97,9 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     props.opacity,
     props.easing,
     props.rootMargin,
+    props.onProgressChange,
+    props.onEnter,
+    props.onExit,
   ]);
 
   const Outer = props.tagOuter;

src/components/Parallax/types.ts

@@ -171,4 +171,17 @@ export interface ParallaxProps {
    * Optionally pass an element tag name to be applied to the outermost parallax element.
    */
   tagOuter?: any;
+
+  /**
+   * Callback for when the progress of an element in the viewport changes.
+   */
+  onProgressChange?: (progress: number) => any;
+  /**
+   * Callback for when an element enters the viewport.
+   */
+  onEnter?: () => any;
+  /**
+   * Callback for when an element exits the viewport.
+   */
+  onExit?: () => any;
 }

yarn.lock

@@ -11278,10 +11278,10 @@ pako@~1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
-parallax-controller@0.1.22:
-  version "0.1.22"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.22.tgz#775f2d2008dc01a7d2490a4ae4c4d1cb08b87365"
-  integrity sha512-wUYgVaT4A223Zr4HvXubVnnjK9tNQE9GVgOBB+QIPFEkorgDrhLCpb2sLqNpIcRGBO/YgQLEEKUBmznNVrDjTA==
+parallax-controller@0.1.23:
+  version "0.1.23"
+  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.23.tgz#dcde479c69524e8ca373abc29ce3194b8ebeeb52"
+  integrity sha512-S85cR/WaCZyC2Iuac3a2q9Q1ljMW75OTSol3Ds9vvqnjCAf+Z2r/JAqIjGeDndO98LwSe0jDtLMcGSB29S5AJw==
   dependencies:
     bezier-easing "^2.1.0"