diff --git a/README.md b/README.md
index b4f2263..8d2d8af 100644
--- a/README.md
+++ b/README.md
@@ -106,7 +106,7 @@ Element(s) that control(s) this component. This component's event handlers will
## Events/Callbacks
-
Name | Description | Parameters |
---|
onTilt | Callback function that is called with the current tilt angle at every tilt event | angle: Tilt angle ({angleX: number, angleY: number}) |
+Name | Description | Parameters |
---|
onTilt | Callback function that is called with the current tilt angle at every tilt event | angle: Tilt angle ({angleX: number, angleY: number}) |
onReset | Callback function that is called when the tilt angle is reset |
|
## Ref
diff --git a/cypress/videos/index.cy.tsx.mp4 b/cypress/videos/index.cy.tsx.mp4
index 7dcce32..7829634 100644
Binary files a/cypress/videos/index.cy.tsx.mp4 and b/cypress/videos/index.cy.tsx.mp4 differ
diff --git a/package.json b/package.json
index 144d157..4a4b2d8 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib/__test__/index.cy.tsx b/src/lib/__test__/index.cy.tsx
index beb9695..93b90e7 100644
--- a/src/lib/__test__/index.cy.tsx
+++ b/src/lib/__test__/index.cy.tsx
@@ -1697,6 +1697,21 @@ describe('', () => {
expect(angleY).to.eq(-20);
});
});
+ it('Testing onReset(), "testFunction" should be called', () => {
+ const test = {
+ testFunction: () => {
+ //test
+ },
+ };
+ cy.spy(test, 'testFunction');
+ cy.mount();
+ 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 = {
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index 096f8a1..1d81b09 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -72,6 +72,7 @@ const NextTilt = forwardRef(
controlElementOnly = false,
testIdEnable = false,
onTilt,
+ onReset,
onMouseEnter,
onMouseMove,
onMouseLeave,
@@ -251,6 +252,9 @@ const NextTilt = forwardRef(
// 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.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(
diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts
index e39bbd1..1e021c0 100644
--- a/src/lib/types/types.ts
+++ b/src/lib/types/types.ts
@@ -502,6 +502,12 @@ export interface TiltProps extends HTMLAttributes {
* @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;
onMouseMove?: MouseEventHandler;
diff --git a/src/stories/Tilt.stories.tsx b/src/stories/Tilt.stories.tsx
index 583b263..d076236 100644
--- a/src/stories/Tilt.stories.tsx
+++ b/src/stories/Tilt.stories.tsx
@@ -28,7 +28,7 @@ const meta: Meta = {
default: 'dark',
values: [{ name: 'dark', value: '#333' }],
},
- actions: { argTypesRegex: 'onTilt' },
+ actions: { argTypesRegex: /^on(Tilt|Reset)$/ },
docs: {
source: { language: 'tsx' },
},