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 -
NameDescriptionParameters
onTilt
Callback function that is called with the current tilt angle at every tilt event
(angle: Angle) => void
angle: Tilt angle ({angleX: number, angleY: number})
+
NameDescriptionParameters
onTilt
Callback function that is called with the current tilt angle at every tilt event
(angle: Angle) => void
angle: Tilt angle ({angleX: number, angleY: number})
onReset
Callback function that is called when the tilt angle is reset
() => void
## 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' }, },