react-confetti-explosion - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

lib/index.d.ts

@@ -10,5 +10,6 @@ import * as React from 'react';
     width?: number;
+    zIndex?: number;
     onComplete?: () => void;
 }
-declare function ConfettiExplosion({ particleCount, duration, colors, particleSize, force, height, width, onComplete, ...props }: ConfettiProps): JSX.Element;
+declare function ConfettiExplosion({ particleCount, duration, colors, particleSize, force, height, width, zIndex, onComplete, ...props }: ConfettiProps): JSX.Element;
 export default ConfettiExplosion;

lib/index.esm.js

@@ -180,3 +180,3 @@ import { jsx } from 'react/jsx-runtime';
 function ConfettiExplosion(_a) {
-    var _b = _a.particleCount, particleCount = _b === void 0 ? PARTICLE_COUNT : _b, _c = _a.duration, duration = _c === void 0 ? DURATION : _c, _d = _a.colors, colors = _d === void 0 ? COLORS : _d, _e = _a.particleSize, particleSize = _e === void 0 ? SIZE : _e, _f = _a.force, force = _f === void 0 ? FORCE : _f, _g = _a.height, height = _g === void 0 ? HEIGHT : _g, _h = _a.width, width = _h === void 0 ? WIDTH : _h, onComplete = _a.onComplete, props = __rest(_a, ["particleCount", "duration", "colors", "particleSize", "force", "height", "width", "onComplete"]);
+    var _b = _a.particleCount, particleCount = _b === void 0 ? PARTICLE_COUNT : _b, _c = _a.duration, duration = _c === void 0 ? DURATION : _c, _d = _a.colors, colors = _d === void 0 ? COLORS : _d, _e = _a.particleSize, particleSize = _e === void 0 ? SIZE : _e, _f = _a.force, force = _f === void 0 ? FORCE : _f, _g = _a.height, height = _g === void 0 ? HEIGHT : _g, _h = _a.width, width = _h === void 0 ? WIDTH : _h, zIndex = _a.zIndex, onComplete = _a.onComplete, props = __rest(_a, ["particleCount", "duration", "colors", "particleSize", "force", "height", "width", "zIndex", "onComplete"]);
     var _j = React.useState(), origin = _j[0], setOrigin = _j[1];
@@ -205,3 +205,3 @@ var particles = createParticles(particleCount, colors);
     return (jsx("div", __assign({ ref: originRef, className: classes.container }, props, { children: origin &&
-            createPortal(jsx("div", __assign({ className: classes.screen }, { children: jsx("div", __assign({ style: { position: 'absolute', top: origin.top, left: origin.left } }, { children: particles.map(function (particle, i) { return (jsx("div", __assign({ id: "confetti-particle-".concat(i), className: classes.particle }, { children: jsx("div", {}) }), particle.degree)); }) })) })), document.body) })));
+            createPortal(jsx("div", __assign({ className: classes.screen }, (zIndex ? { style: { zIndex: zIndex } } : null), { children: jsx("div", __assign({ style: { position: 'absolute', top: origin.top, left: origin.left } }, { children: particles.map(function (particle, i) { return (jsx("div", __assign({ id: "confetti-particle-".concat(i), className: classes.particle }, { children: jsx("div", {}) }), particle.degree)); }) })) })), document.body) })));
 }
@@ -208,0 +208,0 @@

lib/index.js

@@ -201,3 +201,3 @@ 'use strict';
 function ConfettiExplosion(_a) {
-    var _b = _a.particleCount, particleCount = _b === void 0 ? PARTICLE_COUNT : _b, _c = _a.duration, duration = _c === void 0 ? DURATION : _c, _d = _a.colors, colors = _d === void 0 ? COLORS : _d, _e = _a.particleSize, particleSize = _e === void 0 ? SIZE : _e, _f = _a.force, force = _f === void 0 ? FORCE : _f, _g = _a.height, height = _g === void 0 ? HEIGHT : _g, _h = _a.width, width = _h === void 0 ? WIDTH : _h, onComplete = _a.onComplete, props = __rest(_a, ["particleCount", "duration", "colors", "particleSize", "force", "height", "width", "onComplete"]);
+    var _b = _a.particleCount, particleCount = _b === void 0 ? PARTICLE_COUNT : _b, _c = _a.duration, duration = _c === void 0 ? DURATION : _c, _d = _a.colors, colors = _d === void 0 ? COLORS : _d, _e = _a.particleSize, particleSize = _e === void 0 ? SIZE : _e, _f = _a.force, force = _f === void 0 ? FORCE : _f, _g = _a.height, height = _g === void 0 ? HEIGHT : _g, _h = _a.width, width = _h === void 0 ? WIDTH : _h, zIndex = _a.zIndex, onComplete = _a.onComplete, props = __rest(_a, ["particleCount", "duration", "colors", "particleSize", "force", "height", "width", "zIndex", "onComplete"]);
     var _j = React__namespace.useState(), origin = _j[0], setOrigin = _j[1];
@@ -226,3 +226,3 @@ var particles = createParticles(particleCount, colors);
     return (jsxRuntime.jsx("div", __assign({ ref: originRef, className: classes.container }, props, { children: origin &&
-            reactDom.createPortal(jsxRuntime.jsx("div", __assign({ className: classes.screen }, { children: jsxRuntime.jsx("div", __assign({ style: { position: 'absolute', top: origin.top, left: origin.left } }, { children: particles.map(function (particle, i) { return (jsxRuntime.jsx("div", __assign({ id: "confetti-particle-".concat(i), className: classes.particle }, { children: jsxRuntime.jsx("div", {}) }), particle.degree)); }) })) })), document.body) })));
+            reactDom.createPortal(jsxRuntime.jsx("div", __assign({ className: classes.screen }, (zIndex ? { style: { zIndex: zIndex } } : null), { children: jsxRuntime.jsx("div", __assign({ style: { position: 'absolute', top: origin.top, left: origin.left } }, { children: particles.map(function (particle, i) { return (jsxRuntime.jsx("div", __assign({ id: "confetti-particle-".concat(i), className: classes.particle }, { children: jsxRuntime.jsx("div", {}) }), particle.degree)); }) })) })), document.body) })));
 }
@@ -229,0 +229,0 @@

package.json

 {
   "name": "react-confetti-explosion",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "author": "Ethan Herr <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "A lightweight css-animation based confetti exploder for React",

README.md

@@ -45,7 +45,8 @@ # React Confetti Explosion
 | duration      | `number`   | 2200                                                          | Duration of explosion in ms. This is the time it takes particles to travel from explosion point to the floor, as defined by `height`.         |
-| onComplete         | `function`   | undefined                                              | Function that is called at end of `duration` |
+| onComplete    | `function` | undefined                                                     | Function that is called at end of `duration`                                                                                                  |
+| zIndex        | `number`   | undefined                                                     | zIndex that will be applied to the explosion, in case higher Portal stacking order is required.                                                |
 | colors        | `string[]` | [<br>'#FFC700',<br>'#FF0000',<br>'#2E3191',<br>'#41BBC7'<br>] | An array of any css-readable colors, which are evenly distributed across the number of total particles.                                       |
 | force         | `number`   | 0.5                                                           | Between 0-1, roughly the vertical force at which particles initially explode. Straying too far away from 0.5 may start looking...interesting. |
-| height        | `number` `string`   | '120vh'                                                           | Pixel distance the particles will vertically spread from initial explosion point.                                                |
-| width         | `number`   | 1000                                                          | Pixel distance the particles will horizontally spread from initial explosion point.                                                           |  |
+| height        | `number` `string`   | '120vh'                                              | Pixel distance the particles will vertically spread from initial explosion point.                                                             |
+| width         | `number`   | 1000                                                          | Pixel distance the particles will horizontally spread from initial explosion point.                                                           |
 
@@ -52,0 +53,0 @@ Although the above properties of the explosion is controlled, mounting/unmounting is entirely left to the consumer.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33373

increased by1.59%

Number of downloads

64218

increased by7.04%

Lines of code

462

increased by0.22%

Number of lines in readme file

115

increased by0.88%

No dependency changes