Added onReset() callback function - added test - updated story - upda…

…ted readme

README.md

@@ -106,7 +106,7 @@ Element(s) that control(s) this component. This component's event handlers will
 
 ## Events/Callbacks
 
-<table aria-hidden="false"><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Parameters</span></th></tr><tbody><tr><td><span>onTilt</span></td><td><div><span>Callback function that is called with the current tilt angle at every tilt event</span></div><div></div><div><div><code><span>(angle: Angle) => void</span></code></div></div></td><td><div><span>angle: Tilt angle ({angleX: number, angleY: number})</span></div></td></tr></tbody></table>
+<table aria-hidden="false"><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Parameters</span></th></tr><tbody><tr><td><span>onTilt</span></td><td><div><span>Callback function that is called with the current tilt angle at every tilt event</span></div><div></div><div><div><code><span>(angle: Angle) => void</span></code></div></div></td><td><div><span>angle: Tilt angle ({angleX: number, angleY: number})</span></div></td></tr><tr><td><span>onReset</span></td><td><div><span>Callback function that is called when the tilt angle is reset</span></div><div></div><div><div><code><span>() => void</span></code></div></div></td><td><div><span></span></div></td></tr></tbody></table>
 
 ## Ref
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-next-tilt",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A Performant Customizable Tilt Component for React",
   "main": "./dist/react-next-tilt.umd.cjs",
   "module": "./dist/react-next-tilt.js",

src/lib/__test__/index.cy.tsx

@@ -1697,6 +1697,21 @@ describe('<Tilt />', () => {
           expect(angleY).to.eq(-20);
         });
     });
+    it('Testing onReset(), "testFunction" should be called', () => {
+      const test = {
+        testFunction: () => {
+          //test
+        },
+      };
+      cy.spy(test, 'testFunction');
+      cy.mount(<MockTilt onReset={test.testFunction} />);
+      cy.get('[data-testid="container"]')
+        .trigger('mousemove', position.center)
+        .trigger('mouseout')
+        .then(() => {
+          expect(test.testFunction).to.be.called;
+        });
+    });
     it('Testing onMouseEnter() , "testFunction" should be called and "event.type" should be "mouseenter"', () => {
       let isCorrectEvent = false;
       const test = {

src/lib/index.tsx

@@ -72,6 +72,7 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       controlElementOnly = false,
       testIdEnable = false,
       onTilt,
+      onReset,
       onMouseEnter,
       onMouseMove,
       onMouseLeave,
@@ -251,6 +252,9 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
     // resets tilt angle, line glare transform,
     // and spot glare transform/opacity
     const reset = useCallback(() => {
+      // callback function
+      onReset && onReset();
+
       // if initial angle is provided, set it as the current angle
       if (initialAngleX || initialAngleY) {
         const initialAngle: Angle = {
@@ -278,7 +282,7 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
             tiltRef.current.style.transform = `rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
         });
       }
-    }, [initialAngleX, initialAngleY, lineGlareReverse, tilt]);
+    }, [initialAngleX, initialAngleY, lineGlareReverse, onReset, tilt]);
 
     // sets the offset value based on clinetX/Y
     const setOffset = useCallback(

src/lib/types/types.ts

@@ -502,6 +502,12 @@ export interface TiltProps extends HTMLAttributes<HTMLDivElement> {
    * @default undefined
    */
   onTilt?: (angle: Angle) => void;
+  /**
+   * Callback function that is called when the tilt angle is reset
+   *
+   * @default undefined
+   */
+  onReset?: () => void;
   [data: `data-${string}`]: string | undefined;
   onMouseEnter?: MouseEventHandler<HTMLDivElement>;
   onMouseMove?: MouseEventHandler<HTMLDivElement>;

src/stories/Tilt.stories.tsx

@@ -28,7 +28,7 @@ const meta: Meta<typeof Tilt> = {
       default: 'dark',
       values: [{ name: 'dark', value: '#333' }],
     },
-    actions: { argTypesRegex: 'onTilt' },
+    actions: { argTypesRegex: /^on(Tilt|Reset)$/ },
     docs: {
       source: { language: 'tsx' },
     },