- Added the 'spotGlareSizePercent' prop to allow size adjustment for …

…the spot glare effect - Added test for the 'spotGlareSizePercent' prop, updated readme and storybook
rashidshamloo · Sep 3, 2023 · 38891b3 · 38891b3
1 parent f2cfbf6
commit 38891b3
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 4 deletions.
diff --git a/README.md b/README.md
diff --git a/cypress/videos/index.cy.tsx.mp4 b/cypress/videos/index.cy.tsx.mp4
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-next-tilt",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.2.1",
   "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
@@ -1156,6 +1156,18 @@ describe('<Tilt />', () => {
       cy.mount(<MockTilt spotGlareEnable={false} />);
       cy.get('[data-testid="spot-glare"]').should('not.exist');
     });
+    it('Testing spotGlareSizePercent (50)', () => {
+      cy.mount(
+        <MockTilt
+          spotGlareEnable={true}
+          spotGlareSizePercent={50}
+          spotGlareColor="white"
+        />
+      );
+      cy.get('[data-testid="spot-glare"]')
+        .should('have.attr', 'style')
+        .should('contain', 'radial-gradient(white, transparent 25%)');
+    });
     it('Testing spotGlareColor (green)', () => {
       cy.mount(<MockTilt spotGlareEnable={true} spotGlareColor="green" />);
       cy.get('[data-testid="spot-glare"]')

diff --git a/src/lib/index.tsx b/src/lib/index.tsx
@@ -46,6 +46,7 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       lineGlareDirection = 'to-bottom-right',
       lineGlareHoverPosition = 'top-left',
       spotGlareEnable = true,
+      spotGlareSizePercent = 200,
       spotGlareMaxOpacity = 0.5,
       spotGlareMixBlendMode = 'normal',
       spotGlarePosition = 'top',
@@ -113,6 +114,19 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
       lineGlareWidthPercent = limitToRange(lineGlareWidthPercent, 0, 50) / 2;
     }
 
+    // spot glare size check
+    if (spotGlareEnable) {
+      /*
+       * halving the value because spotGlareSizePercent is set
+       * as the end point of the background radial-gradient of
+       * the spot glare element and it's twice the size of the tilt element
+       * so a value of 100 will actually result in it being 200%
+       * of the size of the tilt element which is the default
+       */
+      spotGlareSizePercent =
+        spotGlareSizePercent < 0 ? 0 : spotGlareSizePercent / 2;
+    }
+
     // limit max angles to [0 - 90]
     tiltMaxAngleX = limitToRange(tiltMaxAngleX, 0, 90);
     tiltMaxAngleY = limitToRange(tiltMaxAngleY, 0, 90);
@@ -729,7 +743,7 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
                     width: '200%',
                     height: '200%',
                     transition: CSSTransition,
-                    backgroundImage: `radial-gradient(${spotGlareColor}, transparent)`,
+                    backgroundImage: `radial-gradient(${spotGlareColor}, transparent ${spotGlareSizePercent}%)`,
                     transform: 'translateX(0%) translateY(0%)',
                     opacity: '0',
                   }}

diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts
@@ -261,6 +261,18 @@ export interface TiltProps extends HTMLAttributes<HTMLDivElement> {
    * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--spot-glare Storybook}
    */
   spotGlareEnable?: boolean;
+  /**
+   * Size of the spot glare effect in relation to the component between `0` to `Infinity`
+   *
+   * @note If `spotGlarePosition` is set to anything other than `'all'`, only half of the spot glare effect is visible at any time.
+   *
+   * That's why the default value is 200 to cover the whole element.
+   *
+   * @default 200
+   *
+   * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--spot-glare Storybook}
+   */
+  spotGlareSizePercent?: number;
   /**
    * Maximum opacity of the spot glare effect
    *

diff --git a/src/lib/utility/utility.ts b/src/lib/utility/utility.ts
@@ -123,7 +123,7 @@ export const getSpotGlareTransform = (
     /*
      *  for the 'all' postition, starting position is at the center
      *  and when hovering from top to bottom (offsetY = [0 - 1]),
-     *  translateY should be chnaging from [-25% - 25%]
+     *  translateY should be changing from [-25% - 25%]
      *  mapping [0 - 1] to [-25 - 25]
      *  * -0.5 = [-0.5 - 0.5] => * 50 = [-25 - 25]
      *  and similar mapping is applied to offsetX

diff --git a/src/stories/Tilt.stories.tsx b/src/stories/Tilt.stories.tsx
@@ -50,6 +50,9 @@ const meta: Meta<typeof Tilt> = {
     lineGlareWidthPercent: {
       control: { type: 'range', min: 0, max: 50, step: 1 },
     },
+    spotGlareSizePercent: {
+      control: { type: 'range', min: 0, max: 400, step: 1 },
+    },
     tiltMaxAngleX: {
       control: { type: 'range', min: 0, max: 90, step: 1 },
     },
@@ -194,6 +197,7 @@ export const SpotGlare: Story = {
     controls: {
       include: [
         'spotGlareEnable',
+        'spotGlareSizePercent',
         'spotGlareMaxOpacity',
         'spotGlareColor',
         'spotGlarePosition',
@@ -205,6 +209,7 @@ export const SpotGlare: Story = {
   args: {
     children: <Image />,
     lineGlareEnable: false,
+    spotGlareSizePercent: 200,
     spotGlareEnable: true,
     spotGlareMaxOpacity: 0.5,
     spotGlareColor: 'white',