🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-parallax-tilt
Advanced tools
react-parallax-tilt - npm Package Compare versions
Comparing version 1.7.281 to 1.7.282
@@ -10,23 +10,23 @@ import * as react_jsx_runtime from 'react/jsx-runtime'; | ||
| /** | ||
| * Boolean to enable/disable glare effect. | ||
| * Enables/disables the glare effect. | ||
| */ | ||
| glareEnable?: boolean; | ||
| /** | ||
| * The maximum glare opacity (0.5 = 50%, 1 = 100%, etc.). Range: 0 - 1 | ||
| * Maximum glare opacity (`0.5 = 50%, 1 = 100%`). Range: `0-1` | ||
| */ | ||
| glareMaxOpacity?: number; | ||
| /** | ||
| * Set color of glare effect. | ||
| * Sets the color of the glare effect. | ||
| */ | ||
| glareColor?: string; | ||
| /** | ||
| * Set position of glare effect. | ||
| * Sets the position of the glare effect. | ||
| */ | ||
| glarePosition?: GlarePosition; | ||
| /** | ||
| * Reverse the glare direction. | ||
| * Reverses the glare direction. | ||
| */ | ||
| glareReverse?: boolean; | ||
| /** | ||
| * Set the border radius of the glare. | ||
| * Sets the border radius of the glare. Accepts any standard CSS border radius value. | ||
| */ | ||
@@ -39,35 +39,35 @@ glareBorderRadius?: string; | ||
| /** | ||
| * Boolean to enable/disable tilt effect. | ||
| * Enables/disables the tilt effect. | ||
| */ | ||
| tiltEnable?: boolean; | ||
| /** | ||
| * Reverse the tilt direction. | ||
| * Reverses the tilt direction. | ||
| */ | ||
| tiltReverse?: boolean; | ||
| /** | ||
| * Initial tilt value (degrees) on x axis. | ||
| * Initial tilt angle (in degrees) on the x-axis. | ||
| */ | ||
| tiltAngleXInitial?: number; | ||
| /** | ||
| * Initial tilt value (degrees) on y axis. | ||
| * Initial tilt angle (in degrees) on the y-axis. | ||
| */ | ||
| tiltAngleYInitial?: number; | ||
| /** | ||
| * Max tilt rotation (degrees) on x axis. Range: 0 - 90 | ||
| * Maximum tilt rotation (in degrees) on the x-axis (range: `0°-90°`). | ||
| */ | ||
| tiltMaxAngleX?: number; | ||
| /** | ||
| * Max tilt rotation (degrees) on y axis. Range: 0 - 90 | ||
| * Maximum tilt rotation (in degrees) on the y-axis (range: `0°-90°`). | ||
| */ | ||
| tiltMaxAngleY?: number; | ||
| /** | ||
| * Which axis should be enabled. | ||
| * Enables tilt on a single axis only. | ||
| */ | ||
| tiltAxis?: Axis; | ||
| /** | ||
| * Manual tilt rotation (degrees) on x axis. | ||
| * Manual tilt rotation (in degrees) on the x-axis. | ||
| */ | ||
| tiltAngleXManual?: number | null; | ||
| /** | ||
| * Manual tilt rotation (degrees) on y axis. | ||
| * Manual tilt rotation (in degrees) on the y-axis. | ||
| */ | ||
@@ -103,47 +103,47 @@ tiltAngleYManual?: number | null; | ||
| /** | ||
| * Scale of the component (1.5 = 150%, 2 = 200%, etc.). | ||
| * Scale of the component (`1.5 = 150%, 2 = 200%`). | ||
| */ | ||
| scale?: number; | ||
| /** | ||
| * The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets. | ||
| * Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects. | ||
| */ | ||
| perspective?: number; | ||
| /** | ||
| * Boolean to enable/disable vertical flip of component. | ||
| * Enables/disables vertical flipping of the component. | ||
| */ | ||
| flipVertically?: boolean; | ||
| /** | ||
| * Boolean to enable/disable horizontal flip of component. | ||
| * Enables/disables horizontal flipping of the component. | ||
| */ | ||
| flipHorizontally?: boolean; | ||
| /** | ||
| * If the effects has to be reset on "onLeave" event. | ||
| * Determines if effects should reset on `onLeave` event. | ||
| */ | ||
| reset?: boolean; | ||
| /** | ||
| * Easing of the transition when manipulating the component. | ||
| * Easing function for the transition. | ||
| */ | ||
| transitionEasing?: string; | ||
| /** | ||
| * Speed of the transition when manipulating the component. | ||
| * Speed of the transition. | ||
| */ | ||
| transitionSpeed?: number; | ||
| /** | ||
| * Track mouse and touch events on the whole window. | ||
| * Tracks mouse and touch events across the entire window. | ||
| */ | ||
| trackOnWindow?: boolean; | ||
| /** | ||
| * Boolean to enable/disable device orientation detection. | ||
| * Enables/disables device orientation detection. | ||
| */ | ||
| gyroscope?: boolean; | ||
| /** | ||
| * Gets triggered when user moves on the component. | ||
| * Callback triggered when user moves on the component. | ||
| */ | ||
| onMove?: OnMove; | ||
| /** | ||
| * Gets triggered when user enters the component. | ||
| * Callback triggered when user enters the component. | ||
| */ | ||
| onEnter?: OnEnter; | ||
| /** | ||
| * Gets triggered when user leaves the component. | ||
| * Callback triggered when user leaves the component. | ||
| */ | ||
@@ -150,0 +150,0 @@ onLeave?: OnLeave; |
@@ -10,23 +10,23 @@ import * as react_jsx_runtime from 'react/jsx-runtime'; | ||
| /** | ||
| * Boolean to enable/disable glare effect. | ||
| * Enables/disables the glare effect. | ||
| */ | ||
| glareEnable?: boolean; | ||
| /** | ||
| * The maximum glare opacity (0.5 = 50%, 1 = 100%, etc.). Range: 0 - 1 | ||
| * Maximum glare opacity (`0.5 = 50%, 1 = 100%`). Range: `0-1` | ||
| */ | ||
| glareMaxOpacity?: number; | ||
| /** | ||
| * Set color of glare effect. | ||
| * Sets the color of the glare effect. | ||
| */ | ||
| glareColor?: string; | ||
| /** | ||
| * Set position of glare effect. | ||
| * Sets the position of the glare effect. | ||
| */ | ||
| glarePosition?: GlarePosition; | ||
| /** | ||
| * Reverse the glare direction. | ||
| * Reverses the glare direction. | ||
| */ | ||
| glareReverse?: boolean; | ||
| /** | ||
| * Set the border radius of the glare. | ||
| * Sets the border radius of the glare. Accepts any standard CSS border radius value. | ||
| */ | ||
@@ -39,35 +39,35 @@ glareBorderRadius?: string; | ||
| /** | ||
| * Boolean to enable/disable tilt effect. | ||
| * Enables/disables the tilt effect. | ||
| */ | ||
| tiltEnable?: boolean; | ||
| /** | ||
| * Reverse the tilt direction. | ||
| * Reverses the tilt direction. | ||
| */ | ||
| tiltReverse?: boolean; | ||
| /** | ||
| * Initial tilt value (degrees) on x axis. | ||
| * Initial tilt angle (in degrees) on the x-axis. | ||
| */ | ||
| tiltAngleXInitial?: number; | ||
| /** | ||
| * Initial tilt value (degrees) on y axis. | ||
| * Initial tilt angle (in degrees) on the y-axis. | ||
| */ | ||
| tiltAngleYInitial?: number; | ||
| /** | ||
| * Max tilt rotation (degrees) on x axis. Range: 0 - 90 | ||
| * Maximum tilt rotation (in degrees) on the x-axis (range: `0°-90°`). | ||
| */ | ||
| tiltMaxAngleX?: number; | ||
| /** | ||
| * Max tilt rotation (degrees) on y axis. Range: 0 - 90 | ||
| * Maximum tilt rotation (in degrees) on the y-axis (range: `0°-90°`). | ||
| */ | ||
| tiltMaxAngleY?: number; | ||
| /** | ||
| * Which axis should be enabled. | ||
| * Enables tilt on a single axis only. | ||
| */ | ||
| tiltAxis?: Axis; | ||
| /** | ||
| * Manual tilt rotation (degrees) on x axis. | ||
| * Manual tilt rotation (in degrees) on the x-axis. | ||
| */ | ||
| tiltAngleXManual?: number | null; | ||
| /** | ||
| * Manual tilt rotation (degrees) on y axis. | ||
| * Manual tilt rotation (in degrees) on the y-axis. | ||
| */ | ||
@@ -103,47 +103,47 @@ tiltAngleYManual?: number | null; | ||
| /** | ||
| * Scale of the component (1.5 = 150%, 2 = 200%, etc.). | ||
| * Scale of the component (`1.5 = 150%, 2 = 200%`). | ||
| */ | ||
| scale?: number; | ||
| /** | ||
| * The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets. | ||
| * Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects. | ||
| */ | ||
| perspective?: number; | ||
| /** | ||
| * Boolean to enable/disable vertical flip of component. | ||
| * Enables/disables vertical flipping of the component. | ||
| */ | ||
| flipVertically?: boolean; | ||
| /** | ||
| * Boolean to enable/disable horizontal flip of component. | ||
| * Enables/disables horizontal flipping of the component. | ||
| */ | ||
| flipHorizontally?: boolean; | ||
| /** | ||
| * If the effects has to be reset on "onLeave" event. | ||
| * Determines if effects should reset on `onLeave` event. | ||
| */ | ||
| reset?: boolean; | ||
| /** | ||
| * Easing of the transition when manipulating the component. | ||
| * Easing function for the transition. | ||
| */ | ||
| transitionEasing?: string; | ||
| /** | ||
| * Speed of the transition when manipulating the component. | ||
| * Speed of the transition. | ||
| */ | ||
| transitionSpeed?: number; | ||
| /** | ||
| * Track mouse and touch events on the whole window. | ||
| * Tracks mouse and touch events across the entire window. | ||
| */ | ||
| trackOnWindow?: boolean; | ||
| /** | ||
| * Boolean to enable/disable device orientation detection. | ||
| * Enables/disables device orientation detection. | ||
| */ | ||
| gyroscope?: boolean; | ||
| /** | ||
| * Gets triggered when user moves on the component. | ||
| * Callback triggered when user moves on the component. | ||
| */ | ||
| onMove?: OnMove; | ||
| /** | ||
| * Gets triggered when user enters the component. | ||
| * Callback triggered when user enters the component. | ||
| */ | ||
| onEnter?: OnEnter; | ||
| /** | ||
| * Gets triggered when user leaves the component. | ||
| * Callback triggered when user leaves the component. | ||
| */ | ||
@@ -150,0 +150,0 @@ onLeave?: OnLeave; |
| { | ||
| "name": "react-parallax-tilt", | ||
| "description": "Easily apply tilt hover effect on React components - lightweight/zero dependencies", | ||
| "version": "1.7.281", | ||
| "version": "1.7.282", | ||
| "type": "module", | ||
@@ -70,3 +70,3 @@ "types": "./dist/legacy/index.d.ts", | ||
| "@vitest/coverage-v8": "3.0.5", | ||
| "@vitest/eslint-plugin": "1.1.26", | ||
| "@vitest/eslint-plugin": "1.1.27", | ||
| "@vitest/ui": "3.0.5", | ||
@@ -91,3 +91,3 @@ "commitizen": "4.3.1", | ||
| "lint-staged": "15.4.3", | ||
| "prettier": "3.4.2", | ||
| "prettier": "3.5.0", | ||
| "react": "19.0.0", | ||
@@ -99,3 +99,3 @@ "react-demo-tab": "1.3.26", | ||
| "rollup-plugin-dts": "6.1.1", | ||
| "semantic-release": "24.2.1", | ||
| "semantic-release": "24.2.2", | ||
| "storybook": "8.5.3", | ||
@@ -102,0 +102,0 @@ "typescript": "5.7.3", |
128
README.md
@@ -20,7 +20,7 @@ # React Tilt | ||
| _👀 Easily apply tilt hover effect on React components_ | ||
| _👀 Easily apply tilt hover effects to React components_ | ||
| [](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--glare-effect) | ||
| ## [Demo 💥](https://mkosir.github.io/react-parallax-tilt) | ||
| ## [Live Demo 💥](https://mkosir.github.io/react-parallax-tilt) | ||
@@ -40,5 +40,5 @@ ## Install | ||
| - Support for device tilting (**gyroscope**) | ||
| - **Glare** effect 🌟 with custom props (color, position,...) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--parallax-effect-glare-scale) | ||
| - **Event tracking** for component values 📐 (tilt, glare, mousemove,...) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--event-params) | ||
| - Many effects that can be easily applied: | ||
| - **Glare** effect 🌟 with custom props (color, position, etc.) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--parallax-effect-glare-scale) | ||
| - **Event tracking** for component values 📐 (tilt, glare, mousemove, etc.) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--event-params) | ||
| - Multiple built-in effects: | ||
| - **Scale** on hover [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--scale) | ||
@@ -48,4 +48,4 @@ - **Disable** x/y axis [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--tilt-disable-axis) | ||
| - **Window** tilt hover effect [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--track-on-window) | ||
| - **Manual tilt** control 🕹 (joystick, slider etc.) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--tilt-manual-input) | ||
| - **Parallax** effect on overlaid images [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--parallax-effect-img) | ||
| - **Manual tilt** control 🕹 (via joystick, slider, etc.) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--tilt-manual-input) | ||
| - **Parallax** effect for overlaid images [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--parallax-effect-img) | ||
@@ -70,104 +70,104 @@ ## Example | ||
| All of the props are optional. | ||
| Below is the complete list of possible props and their options: | ||
| All props are optional. | ||
| Here's the complete list of available props and their default values: | ||
| > ▶︎ indicates the default value if there's one | ||
| > ▶︎ indicates the default value | ||
| **tiltEnable**: _boolean_ ▶︎ `true` | ||
| Boolean to enable/disable tilt effect. | ||
| Enables/disables the tilt effect. | ||
| **tiltReverse**: _boolean_ ▶︎ `false` | ||
| Reverse the tilt direction. | ||
| Reverses the tilt direction. | ||
| **tiltAngleXInitial**: _number_ ▶︎ `0` | ||
| Initial tilt value (degrees) on x axis. | ||
| Initial tilt angle (in degrees) on the x-axis. | ||
| **tiltAngleYInitial**: _number_ ▶︎ `0` | ||
| Initial tilt value (degrees) on y axis. | ||
| Initial tilt angle (in degrees) on the y-axis. | ||
| **tiltMaxAngleX**: _number_ ▶︎ `20` | ||
| Max tilt rotation (degrees) on x axis (range: `0°-90°`). | ||
| Maximum tilt rotation (in degrees) on the x-axis. Range: `0°-90°`. | ||
| **tiltMaxAngleY**: _number_ ▶︎ `20` | ||
| Max tilt rotation (degrees) on y axis (range: `0°-90°`). | ||
| Maximum tilt rotation (in degrees) on the y-axis. Range: `0°-90°`. | ||
| **tiltAxis**: _'x' | 'y'_ ▶︎ `undefined` | ||
| Enable tilt on single axis. | ||
| Enables tilt on a single axis only. | ||
| **tiltAngleXManual**: _number_ | null ▶︎ `null` | ||
| Manual tilt rotation (degrees) on x axis. | ||
| Manual tilt rotation (in degrees) on the x-axis. | ||
| **tiltAngleYManual**: _number_ | null ▶︎ `null` | ||
| Manual tilt rotation (degrees) on y axis. | ||
| Manual tilt rotation (in degrees) on the y-axis. | ||
| **glareEnable**: _boolean_ ▶︎ `false` | ||
| Boolean to enable/disable glare effect. | ||
| Enables/disables the glare effect. | ||
| **glareMaxOpacity**: _number_ ▶︎ `0.7` | ||
| The maximum glare opacity (range: `0-1`). | ||
| Maximum glare opacity (`0.5 = 50%, 1 = 100%`). Range: `0-1` | ||
| **glareColor**: _string_ ▶︎ `#ffffff` | ||
| Set color of glare effect. | ||
| Sets the color of the glare effect. | ||
| **glareBorderRadius**: _string_ ▶︎ `0` | ||
| Accepts any standard CSS border radius. Useful if the glare color is different to the page color. | ||
| **glarePosition**: _'top' | 'right' | 'bottom' | 'left' | 'all'_ ▶︎ `bottom` | ||
| Set position of glare effect. | ||
| Sets the position of the glare effect. | ||
| **glareReverse**: _boolean_ ▶︎ `false` | ||
| Reverse the glare direction. | ||
| Reverses the glare direction. | ||
| **glareBorderRadius**: _string_ ▶︎ `0` | ||
| Sets the border radius of the glare. Accepts any standard CSS border radius value. | ||
| **scale**: _number_ ▶︎ `1` | ||
| Scale of the component (1.5 = 150%, 2 = 200%, etc.). | ||
| Scale of the component (`1.5 = 150%, 2 = 200%`). | ||
| **perspective**: _number_ ▶︎ `1000` | ||
| The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets. | ||
| Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects. | ||
| **flipVertically**: _boolean_ ▶︎ `false` | ||
| Boolean to enable/disable vertical flip of component. | ||
| Enables/disables vertical flipping of the component. | ||
| **flipHorizontally**: _boolean_ ▶︎ `false` | ||
| Boolean to enable/disable horizontal flip of component. | ||
| Enables/disables horizontal flipping of the component. | ||
| **reset**: _boolean_ ▶︎ `true` | ||
| If the effects has to be reset on `onLeave` event. | ||
| Determines if effects should reset on `onLeave` event. | ||
| **transitionEasing**: _string_ ▶︎ `cubic-bezier(.03,.98,.52,.99)` | ||
| Easing of the transition when manipulating the component. | ||
| Easing function for the transition. | ||
| **transitionSpeed**: _number_ ▶︎ `400` | ||
| Speed of the transition when manipulating the component. | ||
| Speed of the transition. | ||
| **trackOnWindow**: _boolean_ ▶︎ `false` | ||
| Track mouse and touch events on the whole window. | ||
| Tracks mouse and touch events across the entire window. | ||
| **gyroscope**: _boolean_ ▶︎ `false` | ||
| Boolean to enable/disable device orientation detection. | ||
| Enables/disables device orientation detection. | ||
| **onMove**: ({ **tiltAngleX**: _number_, **tiltAngleY**: _number_, **tiltAngleXPercentage**: _number_, **tiltAngleYPercentage**: _number_, **glareAngle**: _number_, **glareOpacity**: _number_, **event**: _Event_ }) => _void_ | ||
| Gets triggered when user moves on the component. | ||
| Callback triggered when user moves on the component. | ||
| **onEnter**: (**event**: _Event_) => _void_ | ||
| Gets triggered when user enters the component. | ||
| Callback triggered when user enters the component. | ||
| **onLeave**: (**event**: _Event_) => _void_ | ||
| Gets triggered when user leaves the component. | ||
| Callback triggered when user leaves the component. | ||
| ## Gyroscope - Device Orientation | ||
| Please keep in mind that detecting device orientation is currently [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental). | ||
| Please note that device orientation detection is currently [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental). | ||
| Check the [browser compatibility](https://caniuse.com/#search=DeviceOrientation) before using it in production. | ||
| A few takeaways when using device orientation event: | ||
| Important considerations when using device orientation: | ||
| - always use secure origins (such as `https`) | ||
| - it doesn't work in all browsers when using it in cross-origin `<iframe>` element | ||
| - Always use secure origins (such as `https`) | ||
| - It may not work in all browsers when used within a cross-origin `<iframe>` element | ||
| <details> | ||
| <summary>Using device orientation on iOS 13+</summary> | ||
| <summary>Device Orientation on iOS 13+</summary> | ||
| Apple decided turning device motion and orientation off by default since iOS 12.2. | ||
| With iOS 13+ permission API can be used to gain access to device orientation event. | ||
| Apple disabled device motion and orientation by default starting with iOS 12.2. | ||
| iOS 13+ provides a permission API to access device orientation events. | ||
| When using gyroscope feature: | ||
| When using the gyroscope feature: | ||
@@ -180,6 +180,6 @@ ```jsx | ||
| it will present a permission dialog prompting the user to allow motion and orientation access at domain level: | ||
| A permission dialog will prompt the user to allow motion and orientation access at the domain level: | ||
|  | ||
| Note that user needs to take some action (like tapping a button) to be able to display the dialog (invoking dialog on page load is not possible). | ||
| Note: User interaction (like tapping a button) is required to display the permission dialog - it cannot be triggered automatically on page load. | ||
@@ -201,19 +201,21 @@ </details> | ||
| <details> | ||
| <summary>Or setup with npm link</summary> | ||
| Clone this repo on your machine, navigate to its location in the terminal and run: | ||
| <summary>Alternative setup using npm link</summary> | ||
| ```bash | ||
| npm install | ||
| npm link # link your local repo to your global packages | ||
| npm run build:watch # build the files and watch for changes | ||
| ``` | ||
| 1. Clone this repository and navigate to its location | ||
| 2. Run the following commands: | ||
| Clone project repo that you wish to test with react-parallax-tilt library and run: | ||
| ```bash | ||
| npm install | ||
| npm link # link your local repo to your global packages | ||
| npm run build:watch # build the files and watch for changes | ||
| ``` | ||
| ```bash | ||
| npm install | ||
| npm link react-parallax-tilt # link your local copy into this project's node_modules | ||
| npm start | ||
| ``` | ||
| 3. Clone the project you want to test with react-parallax-tilt and run: | ||
| ```bash | ||
| npm install | ||
| npm link react-parallax-tilt # link your local copy into this project's node_modules | ||
| npm start | ||
| ``` | ||
| </details> | ||
@@ -224,3 +226,3 @@ | ||
| All contributions are welcome! | ||
| Please take a moment to review guidelines [PR](.github/pull_request_template.md) | [Issues](https://github.com/mkosir/react-parallax-tilt/issues/new/choose) | ||
| Please review contribution guidelines: [Pull Requests](.github/pull_request_template.md) | [Issues](https://github.com/mkosir/react-parallax-tilt/issues/new/choose) | ||
@@ -227,0 +229,0 @@ [npm-url]: https://www.npmjs.com/package/react-parallax-tilt |
Sorry, the diff of this file is not supported yet
New alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
72383
0.1%- Number of lines in readme file
249
0.81%Worsened metrics
- Number of low quality alerts
4
100%No dependency changes