- Added the shadowType prop to enable switching between box-shadow an…

…d drop-shadow on hover/touch

- Added tests for the shadowType prop, updated readme and storybook

package.json

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

@@ -125,6 +125,35 @@ describe('<Tilt />', () => {
     });
   });
 
+  describe('Testing shadowType', () => {
+    it('Testing shadowType = "box", tilt element style should contain "box-shadow: black 0px 0px 2rem"', () => {
+      cy.mount(
+        <MockTilt
+          shadowEnable={true}
+          shadow="0 0 2rem black"
+          shadowType="box"
+        />
+      );
+      cy.get('[data-testid="container"]').trigger('mouseover', position.center);
+      cy.get('[data-testid="tilt"]')
+        .should('have.attr', 'style')
+        .should('contain', 'box-shadow: black 0px 0px 2rem');
+    });
+    it('Testing shadowType = "drop", container element style should contain "filter: drop-shadow(black 0px 0px 2rem)"', () => {
+      cy.mount(
+        <MockTilt
+          shadowEnable={true}
+          shadow="0 0 2rem black"
+          shadowType="drop"
+        />
+      );
+      cy.get('[data-testid="container"]')
+        .trigger('mouseover', position.center)
+        .should('have.attr', 'style')
+        .should('contain', 'filter: drop-shadow(black 0px 0px 2rem)');
+    });
+  });
+
   describe('Testing scale', () => {
     it('Testing initial scale (1.1), should contain style3d(1,1,1)', () => {
       cy.mount(<MockTilt scale={1.1} />);

src/lib/index.tsx

@@ -34,6 +34,7 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       scale = 1,
       shadowEnable = false,
       shadow = '0 0 1rem rgba(0,0,0,0.5)',
+      shadowType = 'box',
       lineGlareEnable = true,
       lineGlareBlurEnable = true,
       lineGlareBlurAmount = '4px',
@@ -156,15 +157,29 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       });
     }, []);
 
-    // updates the box-shadow css property on the tilt element
+    // updates the shadow on the tilt/container element
     const updateBoxShadow = useCallback(
       (add = true) => {
         requestAnimationFrame(() => {
-          if (tiltRef.current && shadowEnable)
-            tiltRef.current.style.boxShadow = add ? shadow : '';
+          if (shadowType === 'box') {
+            if (tiltRef.current && shadowEnable)
+              tiltRef.current.style.boxShadow = add ? shadow : '';
+          } else {
+            if (containerRef.current && shadowEnable) {
+              // regex source: https://stackoverflow.com/a/59983708/21092502
+              const currentFilterWithoutDropShadow =
+                containerRef.current.style.filter.replace(
+                  /(drop-shadow?\(.*?\))(?=\s[a-z].*?\(.*?\)|\s*$)/g,
+                  ''
+                );
+              containerRef.current.style.filter = add
+                ? currentFilterWithoutDropShadow + ` drop-shadow(${shadow})`
+                : currentFilterWithoutDropShadow;
+            }
+          }
         });
       },
-      [shadow, shadowEnable]
+      [shadow, shadowEnable, shadowType]
     );
 
     // updates spot glare element's transform and opacity
@@ -601,6 +616,7 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
             transformStyle: preserve3dEnable ? 'preserve-3d' : undefined,
             backfaceVisibility: 'hidden',
             filter: disabled ? disabledFilter : undefined,
+            transition: shadowType === 'drop' ? CSSTransition : undefined,
           },
           style
         )}

src/lib/types/types.ts

@@ -21,6 +21,7 @@ export type LineGlareHoverPosition =
   | 'top-right'
   | 'bottom-left'
   | 'bottom-right';
+export type ShadowType = 'box' | 'drop';
 export interface Angle {
   angleX: number;
   angleY: number;
@@ -124,23 +125,39 @@ export interface TiltProps extends HTMLAttributes<HTMLDivElement> {
    */
   scale?: number;
   /**
-   * Enables/Disables the box shadow applied to the tilt element on hover/touch
+   * Enables/Disables the shadow applied to the container or 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
+   * The shadow applied to the container or 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://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow#syntax MDN - drop-shadow}
    *
    * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--shadow Storybook}
    */
   shadow?: string;
+  /**
+   * Type of the shadow applied on hover/touch
+   *
+   * If set to `'box'`, shadow is applied as `box-shadow` to the tilt element
+   *
+   * If set to `'drop'`, shadow is applied as `filter: drop-shadow()` to the container element
+   *
+   * @note Set to `'drop'` if you have a setup where elements go outside the tilt element and want to apply the shadow to them as well,
+   *
+   * Or if you have multiple elements inside the tilt element and want the shadow to apply to them individually and not the whole tilt element
+   *
+   * @default 'box'
+   *
+   * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--shadow Storybook}
+   */
+  shadowType?: ShadowType;
   /**
    * Enables/Disables the line glare effect
    *

src/stories/Tilt.stories.tsx

@@ -102,11 +102,14 @@ export const Scale: Story = {
 };
 
 export const Shadow: Story = {
-  parameters: { controls: { include: ['shadowEnable', 'shadow'] } },
+  parameters: {
+    controls: { include: ['shadowEnable', 'shadow', 'shadowType'] },
+  },
   args: {
     children: <Image />,
     shadowEnable: true,
     shadow: '0 0 1.5rem yellow',
+    shadowType: 'box',
   },
 };