- feature - shadow on hover/touch support + story + tests + updated r…

…eadme

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-next-tilt",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "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

@@ -120,6 +120,23 @@ describe('<Tilt />', () => {
     });
   });
 
+  describe('Testing shadow', () => {
+    it('Testing with shadowEnable = false and shadow = "box-shadow: 0 0 2rem black", should not contain "box-shadow: 0 0 2rem black"', () => {
+      cy.mount(<MockTilt shadowEnable={false} shadow="0 0 2rem black" />);
+      cy.get('[data-testid="tilt"]')
+        .trigger('mouseover', position.center)
+        .should('have.attr', 'style')
+        .should('not.contain', 'box-shadow: black 0px 0px 2rem');
+    });
+    it('Testing with shadowEnable = true and shadow = "box-shadow: 0 0 2rem black", should contain "box-shadow: 0 0 2rem black"', () => {
+      cy.mount(<MockTilt shadowEnable={true} shadow="0 0 2rem black" />);
+      cy.get('[data-testid="tilt"]')
+        .trigger('mouseover', position.center)
+        .should('have.attr', 'style')
+        .should('contain', 'box-shadow: black 0px 0px 2rem');
+    });
+  });
+
   describe('Testing "disabled = true"', () => {
     it('Testing with pointer, pointer at top left and "scale = 1.1", transform should contain "rotateX(0deg)" and "rotateY(0deg)" and "scale3d(1, 1, 1)"', () => {
       cy.mount(

src/lib/index.tsx

@@ -32,6 +32,8 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       borderRadius,
       perspective = '1000px',
       scale = 1,
+      shadowEnable = false,
+      shadow = '0 0 1rem rgba(0,0,0,0.5)',
       lineGlareEnable = true,
       lineGlareBlurEnable = true,
       lineGlareBlurAmount = '4px',
@@ -326,6 +328,15 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
         lineGlareRef.current.style.willChange = add ? 'transform' : '';
     }, []);
 
+    // updates the box-shadow css property on the tilt element
+    const updateBoxShadow = useCallback(
+      (add = true) => {
+        if (tiltRef.current && shadowEnable)
+          tiltRef.current.style.boxShadow = add ? shadow : '';
+      },
+      [shadow, shadowEnable]
+    );
+
     // TiltRef
     useImperativeHandle(
       ref,
@@ -345,7 +356,8 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       if (disabled) return;
       isBeingTouchedOrHovered.current = true;
       updateWillChange();
-    }, [disabled, updateWillChange]);
+      updateBoxShadow();
+    }, [disabled, updateBoxShadow, updateWillChange]);
 
     const touchStart = useCallback(() => {
       if (disabled) return;
@@ -357,7 +369,14 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       }
       isBeingTouchedOrHovered.current = true;
       updateWillChange();
-    }, [disableScrollOnTouch, disabled, fullPageListening, updateWillChange]);
+      updateBoxShadow();
+    }, [
+      disableScrollOnTouch,
+      disabled,
+      fullPageListening,
+      updateBoxShadow,
+      updateWillChange,
+    ]);
 
     const mouseMove = useCallback(
       (e: MouseEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -411,8 +430,9 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       if (disabled) return;
       isBeingTouchedOrHovered.current = false;
       updateWillChange(false);
+      updateBoxShadow(false);
       if (tiltReset) reset();
-    }, [disabled, reset, tiltReset, updateWillChange]);
+    }, [disabled, reset, tiltReset, updateBoxShadow, updateWillChange]);
 
     const touchEnd = useCallback(() => {
       if (disabled) return;
@@ -424,13 +444,15 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       }
       isBeingTouchedOrHovered.current = false;
       updateWillChange(false);
+      updateBoxShadow(false);
       if (tiltReset) reset();
     }, [
       disableScrollOnTouch,
       disabled,
       fullPageListening,
       reset,
       tiltReset,
+      updateBoxShadow,
       updateWillChange,
     ]);
 

src/lib/types/types.ts

@@ -123,6 +123,24 @@ export interface TiltProps extends HTMLAttributes<HTMLDivElement> {
    * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--scale Storybook}
    */
   scale?: number;
+  /**
+   * Enables/Disables the box shadow applied to the tilt element on hover/touch
+   *
+   * @default false
+   *
+   * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--shadow Storybook}
+   */
+  shadowEnable?: boolean;
+  /**
+   * Box shadow applied to the tilt element on hover/touch
+   *
+   * @default '0 0 1rem rgba(0,0,0,0.5)'
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow MDN - box-shadow}
+   *
+   * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--shadow Storybook}
+   */
+  shadow?: string;
   /**
    * Enables/Disables the line glare effect
    *
@@ -252,7 +270,7 @@ export interface TiltProps extends HTMLAttributes<HTMLDivElement> {
    *
    * @default 'top'
    *
-   * @example 'top', 'bottom', 'left', 'right'
+   * @example 'top', 'bottom', 'left', 'right', 'all'
    *
    * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--spot-glare Storybook}
    */

src/stories/Tilt.stories.tsx

@@ -101,6 +101,15 @@ export const Scale: Story = {
   },
 };
 
+export const Shadow: Story = {
+  parameters: { controls: { include: ['shadowEnable', 'shadow'] } },
+  args: {
+    children: <Image />,
+    shadowEnable: true,
+    shadow: '0 0 1.5rem yellow',
+  },
+};
+
 export const TiltReset: Story = {
   parameters: { controls: { include: 'tiltReset' } },
   args: {