react-confetti-boom - npm Package Compare versions

Comparing version 0.0.6 to 1.0.0

lib/index.d.ts

 /// <reference types="react" />
-interface Props {
+type Props = {
+    mode?: 'boom';
     x?: number;
@@ -13,4 +14,10 @@ y?: number;
     launchSpeed?: number;
-}
-declare function Confetti({ x, y, particleCount, deg, shapeSize, spreadDeg, effectInterval, effectCount, colors, launchSpeed, }: Props): JSX.Element;
+} | {
+    mode: 'fall';
+    particleCount?: number;
+    shapeSize?: number;
+    colors?: string[];
+};
+declare function Confetti(props: Props): JSX.Element;
 export default Confetti;
+export type { Props as ConfettiProps };

lib/index.esm.js

@@ -18,3 +18,3 @@ import React, { useRef, useCallback, useEffect } from 'react';
 var Particle = /** @class */function () {
-  function Particle(x, y, deg, colors, shapes, shapeSize, spread, launchSpeed) {
+  function Particle(x, y, deg, colors, shapes, shapeSize, spread, launchSpeed, opacityDelta) {
     if (deg === void 0) {
@@ -35,2 +35,5 @@ deg = 0;
     }
+    if (opacityDelta === void 0) {
+      opacityDelta = 0.004;
+    }
     var DPR = window.devicePixelRatio > 1 ? 2 : 1;
@@ -45,6 +48,7 @@ this.x = x * window.innerWidth * DPR;
     this.vy = this.radius * Math.sin(this.theta);
-    this.xFriction = 0.90;
+    this.xFriction = 0.9;
     this.yFriction = 0.87;
-    this.gravity = randomNumBetween(0.50, 0.60);
+    this.gravity = randomNumBetween(0.5, 0.6);
     this.opacity = 1;
+    this.opacityDelta = opacityDelta;
     this.rotate = randomNumBetween(0, 360);
@@ -69,3 +73,3 @@ this.widthDelta = randomNumBetween(0, 360);
     this.y += this.vy;
-    this.opacity -= 0.004;
+    this.opacity -= this.opacityDelta;
     this.widthDelta += 2;
@@ -133,23 +137,31 @@ this.heightDelta += 2;
 var INTERVAL = 1000 / FPS;
-function Confetti(_a) {
-  var _b = _a.x,
-    x = _b === void 0 ? 0.5 : _b,
-    _c = _a.y,
-    y = _c === void 0 ? 0.5 : _c,
-    _d = _a.particleCount,
-    particleCount = _d === void 0 ? 30 : _d,
-    _e = _a.deg,
-    deg = _e === void 0 ? 270 : _e,
-    _f = _a.shapeSize,
-    shapeSize = _f === void 0 ? 12 : _f,
-    _g = _a.spreadDeg,
-    spreadDeg = _g === void 0 ? 30 : _g,
-    _h = _a.effectInterval,
-    effectInterval = _h === void 0 ? 3000 : _h,
-    _j = _a.effectCount,
-    effectCount = _j === void 0 ? 1 : _j,
-    _k = _a.colors,
-    colors = _k === void 0 ? ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'] : _k,
-    _l = _a.launchSpeed,
-    launchSpeed = _l === void 0 ? 1 : _l;
+function Confetti(props) {
+  // common props
+  var _a = props.mode,
+    mode = _a === void 0 ? 'boom' : _a,
+    _b = props.particleCount,
+    particleCount = _b === void 0 ? 30 : _b,
+    _c = props.shapeSize,
+    shapeSize = _c === void 0 ? 12 : _c,
+    _d = props.colors,
+    colors = _d === void 0 ? ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'] : _d;
+  // boom props
+  var _e = props.mode === 'boom' ? props : {
+      effectInterval: 1,
+      effectCount: Infinity
+    },
+    _f = _e.x,
+    x = _f === void 0 ? 0.5 : _f,
+    _g = _e.y,
+    y = _g === void 0 ? 0.5 : _g,
+    _h = _e.deg,
+    deg = _h === void 0 ? 270 : _h,
+    _j = _e.spreadDeg,
+    spreadDeg = _j === void 0 ? 30 : _j,
+    _k = _e.effectInterval,
+    effectInterval = _k === void 0 ? 3000 : _k,
+    _l = _e.effectCount,
+    effectCount = _l === void 0 ? 1 : _l,
+    _m = _e.launchSpeed,
+    launchSpeed = _m === void 0 ? 1 : _m;
   var canvasRef = useRef(null);
@@ -175,6 +187,14 @@ var ctxRef = useRef();
   var createConfetti = useCallback(function () {
-    for (var i = 0; i < particleCount; i += 1) {
-      particlesRef.current.push(new Particle(x, y, deg, colors, ['circle', 'square'], shapeSize, spreadDeg, launchSpeed));
+    var isFallMode = mode === 'fall';
+    var effectiveCount = isFallMode ? particleCount / 30 : particleCount;
+    var effectiveX = isFallMode ? randomNumBetween(0, 1) : x;
+    var effectiveY = isFallMode ? randomNumBetween(-0.1, -0.3) : y;
+    var effectiveDeg = isFallMode ? 270 : deg;
+    var effectiveSpreadDeg = isFallMode ? 0 : spreadDeg;
+    var effectiveLaunchSpeed = isFallMode ? 0 : launchSpeed;
+    var effectiveOpacityDelta = isFallMode ? 5 / window.innerHeight : 0.004;
+    for (var i = 0; i < effectiveCount; i += 1) {
+      particlesRef.current.push(new Particle(effectiveX, effectiveY, effectiveDeg, colors, ['circle', 'square'], shapeSize, effectiveSpreadDeg, effectiveLaunchSpeed, effectiveOpacityDelta));
     }
-  }, [x, y, deg, colors, shapeSize, spreadDeg, launchSpeed, particleCount]);
+  }, [mode, x, y, deg, colors, shapeSize, spreadDeg, launchSpeed, particleCount]);
   var render = useCallback(function () {
@@ -181,0 +201,0 @@ if (!ctxRef.current) return;

lib/index.js

@@ -20,3 +20,3 @@ 'use strict';
 var Particle = /** @class */function () {
-  function Particle(x, y, deg, colors, shapes, shapeSize, spread, launchSpeed) {
+  function Particle(x, y, deg, colors, shapes, shapeSize, spread, launchSpeed, opacityDelta) {
     if (deg === void 0) {
@@ -37,2 +37,5 @@ deg = 0;
     }
+    if (opacityDelta === void 0) {
+      opacityDelta = 0.004;
+    }
     var DPR = window.devicePixelRatio > 1 ? 2 : 1;
@@ -47,6 +50,7 @@ this.x = x * window.innerWidth * DPR;
     this.vy = this.radius * Math.sin(this.theta);
-    this.xFriction = 0.90;
+    this.xFriction = 0.9;
     this.yFriction = 0.87;
-    this.gravity = randomNumBetween(0.50, 0.60);
+    this.gravity = randomNumBetween(0.5, 0.6);
     this.opacity = 1;
+    this.opacityDelta = opacityDelta;
     this.rotate = randomNumBetween(0, 360);
@@ -71,3 +75,3 @@ this.widthDelta = randomNumBetween(0, 360);
     this.y += this.vy;
-    this.opacity -= 0.004;
+    this.opacity -= this.opacityDelta;
     this.widthDelta += 2;
@@ -135,23 +139,31 @@ this.heightDelta += 2;
 var INTERVAL = 1000 / FPS;
-function Confetti(_a) {
-  var _b = _a.x,
-    x = _b === void 0 ? 0.5 : _b,
-    _c = _a.y,
-    y = _c === void 0 ? 0.5 : _c,
-    _d = _a.particleCount,
-    particleCount = _d === void 0 ? 30 : _d,
-    _e = _a.deg,
-    deg = _e === void 0 ? 270 : _e,
-    _f = _a.shapeSize,
-    shapeSize = _f === void 0 ? 12 : _f,
-    _g = _a.spreadDeg,
-    spreadDeg = _g === void 0 ? 30 : _g,
-    _h = _a.effectInterval,
-    effectInterval = _h === void 0 ? 3000 : _h,
-    _j = _a.effectCount,
-    effectCount = _j === void 0 ? 1 : _j,
-    _k = _a.colors,
-    colors = _k === void 0 ? ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'] : _k,
-    _l = _a.launchSpeed,
-    launchSpeed = _l === void 0 ? 1 : _l;
+function Confetti(props) {
+  // common props
+  var _a = props.mode,
+    mode = _a === void 0 ? 'boom' : _a,
+    _b = props.particleCount,
+    particleCount = _b === void 0 ? 30 : _b,
+    _c = props.shapeSize,
+    shapeSize = _c === void 0 ? 12 : _c,
+    _d = props.colors,
+    colors = _d === void 0 ? ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'] : _d;
+  // boom props
+  var _e = props.mode === 'boom' ? props : {
+      effectInterval: 1,
+      effectCount: Infinity
+    },
+    _f = _e.x,
+    x = _f === void 0 ? 0.5 : _f,
+    _g = _e.y,
+    y = _g === void 0 ? 0.5 : _g,
+    _h = _e.deg,
+    deg = _h === void 0 ? 270 : _h,
+    _j = _e.spreadDeg,
+    spreadDeg = _j === void 0 ? 30 : _j,
+    _k = _e.effectInterval,
+    effectInterval = _k === void 0 ? 3000 : _k,
+    _l = _e.effectCount,
+    effectCount = _l === void 0 ? 1 : _l,
+    _m = _e.launchSpeed,
+    launchSpeed = _m === void 0 ? 1 : _m;
   var canvasRef = React.useRef(null);
@@ -177,6 +189,14 @@ var ctxRef = React.useRef();
   var createConfetti = React.useCallback(function () {
-    for (var i = 0; i < particleCount; i += 1) {
-      particlesRef.current.push(new Particle(x, y, deg, colors, ['circle', 'square'], shapeSize, spreadDeg, launchSpeed));
+    var isFallMode = mode === 'fall';
+    var effectiveCount = isFallMode ? particleCount / 30 : particleCount;
+    var effectiveX = isFallMode ? randomNumBetween(0, 1) : x;
+    var effectiveY = isFallMode ? randomNumBetween(-0.1, -0.3) : y;
+    var effectiveDeg = isFallMode ? 270 : deg;
+    var effectiveSpreadDeg = isFallMode ? 0 : spreadDeg;
+    var effectiveLaunchSpeed = isFallMode ? 0 : launchSpeed;
+    var effectiveOpacityDelta = isFallMode ? 5 / window.innerHeight : 0.004;
+    for (var i = 0; i < effectiveCount; i += 1) {
+      particlesRef.current.push(new Particle(effectiveX, effectiveY, effectiveDeg, colors, ['circle', 'square'], shapeSize, effectiveSpreadDeg, effectiveLaunchSpeed, effectiveOpacityDelta));
     }
-  }, [x, y, deg, colors, shapeSize, spreadDeg, launchSpeed, particleCount]);
+  }, [mode, x, y, deg, colors, shapeSize, spreadDeg, launchSpeed, particleCount]);
   var render = React.useCallback(function () {
@@ -183,0 +203,0 @@ if (!ctxRef.current) return;

package.json

 {
   "name": "react-confetti-boom",
-  "version": "0.0.6",
+  "version": "1.0.0",
   "description": "A customizable React confetti explosion component for celebrations and special events",
@@ -14,3 +14,4 @@ "author": "almond-bongbong <[e-mail]>",
     "build:watch": "rollup -c -w",
-    "dev": "npm run build:watch"
+    "dev": "npm run build:watch",
+    "dev:example": "cd example && npm run dev"
   },
@@ -17,0 +18,0 @@ "peerDependencies": {

README.md

@@ -10,7 +10,6 @@ # React Confetti Boom 🎉
 
+| `boom` mode                                                                                    | `fall` mode                                                                                    |
+|------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------|
+| ![boom](https://github.com/almond-bongbong/react-confetti-boom/raw/main/docs/preview_boom.gif) | ![fall](https://github.com/almond-bongbong/react-confetti-boom/raw/main/docs/preview_fall.gif) |
 
-<p align="center">
-  <img src="./docs/preview.gif" alt="React Confetti Boom preview" />
-</p>
-
 ## Table of Contents
@@ -20,3 +19,3 @@
 - [Usage](#usage)
-- [Demo](#demo)
+- [Live Demo](#live-demo)
 - [Props](#props)
@@ -62,14 +61,15 @@ - [Example](#example)
 
-| Name           | Type     | Default                                      | Description                                                                  |
-| -------------- | -------- | -------------------------------------------- | ---------------------------------------------------------------------------- |
-| x              | number   | 0.5                                          | Horizontal starting position of confetti as a ratio of canvas width (0 to 1) |
-| y              | number   | 0.5                                          | Vertical starting position of confetti as a ratio of canvas height (0 to 1)  |
-| particleCount  | number   | 30                                           | Number of confetti particles to generate                                     |
-| deg            | number   | 270                                          | Initial angle (in degrees) at which particles are emitted                    |
-| shapeSize      | number   | 12                                           | Size of confetti particles                                                   |
-| spreadDeg      | number   | 30                                           | Angle (in degrees) that particles can deviate from the initial angle (deg)   |
-| effectInterval | number   | 3000                                         | Interval (in ms) between consecutive confetti bursts                         |
-| effectCount    | number   | 1                                            | Number of confetti bursts to render                                          |
-| colors         | string[] | ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'] | Array of colors for confetti particles, in hex format                        |
-| launchSpeed    | number   | 1                                            | Initial speed at which particles are launched                                |
+| Name           | Type             | Default                                      | Description                                                                         |
+| -------------- | ---------------- | -------------------------------------------- | ----------------------------------------------------------------------------------- |
+| mode           | 'boom' \| 'fall' | 'boom'                                       | Mode for confetti animation. 'boom' for explosion-like, 'fall' for rain-like effect |
+| x              | number           | 0.5                                          | Horizontal starting position of confetti as a ratio of canvas width (0 to 1)        |
+| y              | number           | 0.5                                          | Vertical starting position of confetti as a ratio of canvas height (0 to 1)         |
+| particleCount  | number           | 30                                           | Number of confetti particles to generate                                            |
+| deg            | number           | 270                                          | Initial angle (in degrees) at which particles are emitted                           |
+| shapeSize      | number           | 12                                           | Size of confetti particles                                                          |
+| spreadDeg      | number           | 30                                           | Angle (in degrees) that particles can deviate from the initial angle (deg)          |
+| effectInterval | number           | 3000                                         | Interval (in ms) between consecutive confetti bursts                                |
+| effectCount    | number           | 1                                            | Number of confetti bursts to render                                                 |
+| colors         | string[]         | ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'] | Array of colors for confetti particles, in hex format                               |
+| launchSpeed    | number           | 1                                            | Initial speed at which particles are launched                                       |
 
@@ -109,2 +109,1 @@ ## Example
 This project is licensed under the terms of the MIT License.
-

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32160

increased by14.57%

Number of package files

12

increased by20%

Lines of code

594

increased by17.86%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

106

decreased by-0.93%

No dependency changes