react-native-confetti-reanimated 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -38
- package/lib/commonjs/ConfettiCanvas.js +8 -7
- package/lib/commonjs/ConfettiCanvas.js.map +1 -1
- package/lib/commonjs/ConfettiParticle.js +134 -53
- package/lib/commonjs/ConfettiParticle.js.map +1 -1
- package/lib/commonjs/presets.js +65 -79
- package/lib/commonjs/presets.js.map +1 -1
- package/lib/commonjs/utils.js +65 -10
- package/lib/commonjs/utils.js.map +1 -1
- package/lib/module/ConfettiCanvas.js +8 -7
- package/lib/module/ConfettiCanvas.js.map +1 -1
- package/lib/module/ConfettiParticle.js +135 -54
- package/lib/module/ConfettiParticle.js.map +1 -1
- package/lib/module/presets.js +64 -78
- package/lib/module/presets.js.map +1 -1
- package/lib/module/utils.js +65 -10
- package/lib/module/utils.js.map +1 -1
- package/lib/typescript/ConfettiCanvas.d.ts.map +1 -1
- package/lib/typescript/ConfettiParticle.d.ts +2 -1
- package/lib/typescript/ConfettiParticle.d.ts.map +1 -1
- package/lib/typescript/presets.d.ts +22 -26
- package/lib/typescript/presets.d.ts.map +1 -1
- package/lib/typescript/types.d.ts +4 -3
- package/lib/typescript/types.d.ts.map +1 -1
- package/lib/typescript/utils.d.ts.map +1 -1
- package/package.json +10 -14
- package/src/ConfettiCanvas.tsx +19 -14
- package/src/ConfettiParticle.tsx +153 -75
- package/src/presets.ts +56 -70
- package/src/types.ts +4 -3
- package/src/utils.ts +44 -20
- package/lib/module/package.json +0 -1
package/lib/commonjs/presets.js
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.stars = exports.
|
|
6
|
+
exports.stars = exports.rightCannon = exports.realistic = exports.randomDirection = exports.presets = exports.leftCannon = exports.fireworks = exports.bottomCannon = exports.basicCannon = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* Predefined confetti presets for common use cases
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
|
-
* Basic
|
|
12
|
+
* Basic Cannon - The default basic blast of confetti
|
|
13
13
|
*/
|
|
14
|
-
const
|
|
14
|
+
const basicCannon = exports.basicCannon = {
|
|
15
15
|
particleCount: 100,
|
|
16
16
|
spread: 70,
|
|
17
17
|
origin: {
|
|
@@ -20,36 +20,70 @@ const celebration = exports.celebration = {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* Random Direction - Random amount in random directions
|
|
24
|
+
*/
|
|
25
|
+
const randomDirection = exports.randomDirection = {
|
|
26
|
+
particleCount: Math.floor(200 + Math.random() * 100),
|
|
27
|
+
angle: Math.random() * 360,
|
|
28
|
+
spread: 180 + Math.random() * 180,
|
|
29
|
+
origin: {
|
|
30
|
+
x: Math.random(),
|
|
31
|
+
y: Math.random() - 0.2
|
|
32
|
+
},
|
|
33
|
+
startVelocity: 30 + Math.random() * 20
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Realistic Look - Mix multiple effects to avoid "flattened cone"
|
|
38
|
+
* Fires 3 bursts with varying parameters for natural look
|
|
39
|
+
*/
|
|
40
|
+
const realistic = exports.realistic = {
|
|
41
|
+
particleCount: 100,
|
|
42
|
+
// Per burst (will fire 3x)
|
|
43
|
+
spread: 70,
|
|
44
|
+
startVelocity: 45,
|
|
45
|
+
decay: 0.91,
|
|
46
|
+
scalar: 1,
|
|
47
|
+
origin: {
|
|
48
|
+
y: 0.7
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Fireworks - From the sides
|
|
24
54
|
*/
|
|
25
55
|
const fireworks = exports.fireworks = {
|
|
26
|
-
particleCount:
|
|
56
|
+
particleCount: 100,
|
|
27
57
|
spread: 360,
|
|
28
58
|
startVelocity: 30,
|
|
29
59
|
decay: 0.94,
|
|
30
|
-
scalar: 1.2
|
|
60
|
+
scalar: 1.2,
|
|
61
|
+
origin: {
|
|
62
|
+
y: 0.6
|
|
63
|
+
}
|
|
31
64
|
};
|
|
32
65
|
|
|
33
66
|
/**
|
|
34
|
-
*
|
|
67
|
+
* Stars - Burst of star shapes
|
|
35
68
|
*/
|
|
36
|
-
const
|
|
69
|
+
const stars = exports.stars = {
|
|
37
70
|
particleCount: 50,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
71
|
+
spread: 360,
|
|
72
|
+
startVelocity: 20,
|
|
73
|
+
decay: 0.95,
|
|
74
|
+
gravity: 0.5,
|
|
75
|
+
shapes: ['star'],
|
|
76
|
+
scalar: 1.5,
|
|
77
|
+
// Scaled appropriately for star character
|
|
78
|
+
colors: ['#FFD700', '#FFA500', '#FFFF00']
|
|
45
79
|
};
|
|
46
80
|
|
|
47
81
|
/**
|
|
48
|
-
* Confetti from left side
|
|
82
|
+
* Left Cannon - Confetti from left side
|
|
49
83
|
*/
|
|
50
84
|
const leftCannon = exports.leftCannon = {
|
|
51
85
|
particleCount: 50,
|
|
52
|
-
angle:
|
|
86
|
+
angle: 60,
|
|
53
87
|
spread: 55,
|
|
54
88
|
origin: {
|
|
55
89
|
x: 0,
|
|
@@ -59,11 +93,11 @@ const leftCannon = exports.leftCannon = {
|
|
|
59
93
|
};
|
|
60
94
|
|
|
61
95
|
/**
|
|
62
|
-
* Confetti from right side
|
|
96
|
+
* Right Cannon - Confetti from right side
|
|
63
97
|
*/
|
|
64
98
|
const rightCannon = exports.rightCannon = {
|
|
65
99
|
particleCount: 50,
|
|
66
|
-
angle:
|
|
100
|
+
angle: 120,
|
|
67
101
|
spread: 55,
|
|
68
102
|
origin: {
|
|
69
103
|
x: 1,
|
|
@@ -73,74 +107,26 @@ const rightCannon = exports.rightCannon = {
|
|
|
73
107
|
};
|
|
74
108
|
|
|
75
109
|
/**
|
|
76
|
-
*
|
|
110
|
+
* Bottom Cannon - Confetti from bottom
|
|
77
111
|
*/
|
|
78
|
-
const
|
|
79
|
-
particleCount: 200,
|
|
80
|
-
spread: 160,
|
|
81
|
-
origin: {
|
|
82
|
-
y: 0.5
|
|
83
|
-
},
|
|
84
|
-
startVelocity: 35,
|
|
85
|
-
gravity: 1.5,
|
|
86
|
-
drift: 1,
|
|
87
|
-
tilt: true,
|
|
88
|
-
shapes: ['square', 'circle', 'triangle'],
|
|
89
|
-
scalar: 0.8
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Snow effect
|
|
94
|
-
*/
|
|
95
|
-
const snow = exports.snow = {
|
|
96
|
-
particleCount: 100,
|
|
97
|
-
spread: 180,
|
|
98
|
-
origin: {
|
|
99
|
-
y: -0.1
|
|
100
|
-
},
|
|
101
|
-
startVelocity: 0,
|
|
102
|
-
gravity: 0.3,
|
|
103
|
-
drift: 1,
|
|
104
|
-
colors: ['#ffffff', '#e8f4ff', '#c9e5ff'],
|
|
105
|
-
shapes: ['circle'],
|
|
106
|
-
scalar: 0.6,
|
|
107
|
-
angle: 270
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* Stars effect
|
|
112
|
-
*/
|
|
113
|
-
const stars = exports.stars = {
|
|
112
|
+
const bottomCannon = exports.bottomCannon = {
|
|
114
113
|
particleCount: 50,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
decay: 0.95,
|
|
118
|
-
gravity: 0.5,
|
|
119
|
-
colors: ['#FFD700', '#FFA500', '#FFFF00'],
|
|
120
|
-
shapes: ['circle'],
|
|
121
|
-
scalar: 0.5
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* School pride (custom colors)
|
|
126
|
-
*/
|
|
127
|
-
const schoolPride = exports.schoolPride = {
|
|
128
|
-
particleCount: 100,
|
|
129
|
-
spread: 160,
|
|
114
|
+
angle: 90,
|
|
115
|
+
spread: 45,
|
|
130
116
|
origin: {
|
|
131
|
-
y:
|
|
117
|
+
y: 1,
|
|
118
|
+
x: 0.5
|
|
132
119
|
},
|
|
133
|
-
|
|
120
|
+
startVelocity: 55
|
|
134
121
|
};
|
|
135
122
|
const presets = exports.presets = {
|
|
136
|
-
|
|
123
|
+
basicCannon,
|
|
124
|
+
randomDirection,
|
|
125
|
+
realistic,
|
|
137
126
|
fireworks,
|
|
138
|
-
|
|
127
|
+
stars,
|
|
139
128
|
leftCannon,
|
|
140
129
|
rightCannon,
|
|
141
|
-
|
|
142
|
-
snow,
|
|
143
|
-
stars,
|
|
144
|
-
schoolPride
|
|
130
|
+
bottomCannon
|
|
145
131
|
};
|
|
146
132
|
//# sourceMappingURL=presets.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["basicCannon","exports","particleCount","spread","origin","y","randomDirection","Math","floor","random","angle","x","startVelocity","realistic","decay","scalar","fireworks","stars","gravity","shapes","colors","leftCannon","rightCannon","bottomCannon","presets"],"sourceRoot":"../../src","sources":["presets.ts"],"mappings":";;;;;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACO,MAAMA,WAA2B,GAAAC,OAAA,CAAAD,WAAA,GAAG;EACzCE,aAAa,EAAE,GAAG;EAClBC,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE;IAAEC,CAAC,EAAE;EAAI;AACnB,CAAC;;AAED;AACA;AACA;AACO,MAAMC,eAA+B,GAAAL,OAAA,CAAAK,eAAA,GAAG;EAC7CJ,aAAa,EAAEK,IAAI,CAACC,KAAK,CAAC,GAAG,GAAGD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;EACpDC,KAAK,EAAEH,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG;EAC1BN,MAAM,EAAE,GAAG,GAAGI,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG;EACjCL,MAAM,EAAE;IACNO,CAAC,EAAEJ,IAAI,CAACE,MAAM,CAAC,CAAC;IAChBJ,CAAC,EAAEE,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG;EACrB,CAAC;EACDG,aAAa,EAAE,EAAE,GAAGL,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG;AACtC,CAAC;;AAED;AACA;AACA;AACA;AACO,MAAMI,SAAyB,GAAAZ,OAAA,CAAAY,SAAA,GAAG;EACvCX,aAAa,EAAE,GAAG;EAAE;EACpBC,MAAM,EAAE,EAAE;EACVS,aAAa,EAAE,EAAE;EACjBE,KAAK,EAAE,IAAI;EACXC,MAAM,EAAE,CAAC;EACTX,MAAM,EAAE;IAAEC,CAAC,EAAE;EAAI;AACnB,CAAC;;AAED;AACA;AACA;AACO,MAAMW,SAAyB,GAAAf,OAAA,CAAAe,SAAA,GAAG;EACvCd,aAAa,EAAE,GAAG;EAClBC,MAAM,EAAE,GAAG;EACXS,aAAa,EAAE,EAAE;EACjBE,KAAK,EAAE,IAAI;EACXC,MAAM,EAAE,GAAG;EACXX,MAAM,EAAE;IAAEC,CAAC,EAAE;EAAI;AACnB,CAAC;;AAED;AACA;AACA;AACO,MAAMY,KAAqB,GAAAhB,OAAA,CAAAgB,KAAA,GAAG;EACnCf,aAAa,EAAE,EAAE;EACjBC,MAAM,EAAE,GAAG;EACXS,aAAa,EAAE,EAAE;EACjBE,KAAK,EAAE,IAAI;EACXI,OAAO,EAAE,GAAG;EACZC,MAAM,EAAE,CAAC,MAAM,CAAC;EAChBJ,MAAM,EAAE,GAAG;EAAE;EACbK,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS;AAC1C,CAAC;;AAED;AACA;AACA;AACO,MAAMC,UAA0B,GAAApB,OAAA,CAAAoB,UAAA,GAAG;EACxCnB,aAAa,EAAE,EAAE;EACjBQ,KAAK,EAAE,EAAE;EACTP,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE;IAAEO,CAAC,EAAE,CAAC;IAAEN,CAAC,EAAE;EAAI,CAAC;EACxBO,aAAa,EAAE;AACjB,CAAC;;AAED;AACA;AACA;AACO,MAAMU,WAA2B,GAAArB,OAAA,CAAAqB,WAAA,GAAG;EACzCpB,aAAa,EAAE,EAAE;EACjBQ,KAAK,EAAE,GAAG;EACVP,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE;IAAEO,CAAC,EAAE,CAAC;IAAEN,CAAC,EAAE;EAAI,CAAC;EACxBO,aAAa,EAAE;AACjB,CAAC;;AAED;AACA;AACA;AACO,MAAMW,YAA4B,GAAAtB,OAAA,CAAAsB,YAAA,GAAG;EAC1CrB,aAAa,EAAE,EAAE;EACjBQ,KAAK,EAAE,EAAE;EACTP,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE;IAAEC,CAAC,EAAE,CAAC;IAAEM,CAAC,EAAE;EAAI,CAAC;EACxBC,aAAa,EAAE;AACjB,CAAC;AAEM,MAAMY,OAAO,GAAAvB,OAAA,CAAAuB,OAAA,GAAG;EACrBxB,WAAW;EACXM,eAAe;EACfO,SAAS;EACTG,SAAS;EACTC,KAAK;EACLI,UAAU;EACVC,WAAW;EACXC;AACF,CAAC","ignoreList":[]}
|
package/lib/commonjs/utils.js
CHANGED
|
@@ -4,7 +4,50 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.updateParticle = exports.randomRange = exports.randomFromArray = exports.degreesToRadians = exports.createConfettiParticles = exports.DEFAULT_CONFIG = exports.DEFAULT_COLORS = void 0;
|
|
7
|
-
|
|
7
|
+
// Canvas-confetti uses highly contrasting, distinct colors for realistic effect
|
|
8
|
+
// Each color is maximally different from others for clear visibility
|
|
9
|
+
const DEFAULT_COLORS = exports.DEFAULT_COLORS = [
|
|
10
|
+
// Primary vibrant colors (maximally distinct)
|
|
11
|
+
'#26ccff',
|
|
12
|
+
// Bright Cyan
|
|
13
|
+
'#a25afd',
|
|
14
|
+
// Purple
|
|
15
|
+
'#ff5e7e',
|
|
16
|
+
// Pink
|
|
17
|
+
'#88ff5a',
|
|
18
|
+
// Lime Green
|
|
19
|
+
'#fcff42',
|
|
20
|
+
// Yellow
|
|
21
|
+
'#ffa62d',
|
|
22
|
+
// Orange
|
|
23
|
+
'#ff36ff',
|
|
24
|
+
// Magenta
|
|
25
|
+
// Secondary distinct colors
|
|
26
|
+
'#1e90ff',
|
|
27
|
+
// Dodger Blue
|
|
28
|
+
'#9400d3',
|
|
29
|
+
// Dark Violet
|
|
30
|
+
'#ff1493',
|
|
31
|
+
// Deep Pink
|
|
32
|
+
'#32cd32',
|
|
33
|
+
// Lime
|
|
34
|
+
'#ffd700',
|
|
35
|
+
// Gold
|
|
36
|
+
'#ff6347',
|
|
37
|
+
// Tomato
|
|
38
|
+
'#00ffff',
|
|
39
|
+
// Cyan
|
|
40
|
+
'#ff00ff',
|
|
41
|
+
// Fuchsia
|
|
42
|
+
// Additional contrast colors
|
|
43
|
+
'#00ff00',
|
|
44
|
+
// Pure Green
|
|
45
|
+
'#ff0000',
|
|
46
|
+
// Pure Red
|
|
47
|
+
'#0000ff',
|
|
48
|
+
// Pure Blue
|
|
49
|
+
'#ffff00' // Pure Yellow
|
|
50
|
+
];
|
|
8
51
|
const DEFAULT_CONFIG = exports.DEFAULT_CONFIG = {
|
|
9
52
|
particleCount: 50,
|
|
10
53
|
angle: 90,
|
|
@@ -20,7 +63,8 @@ const DEFAULT_CONFIG = exports.DEFAULT_CONFIG = {
|
|
|
20
63
|
x: 0.5,
|
|
21
64
|
y: 0.5
|
|
22
65
|
},
|
|
23
|
-
shapes: ['square'
|
|
66
|
+
shapes: ['square'],
|
|
67
|
+
// Rectangular strips are most realistic
|
|
24
68
|
tilt: true,
|
|
25
69
|
tiltAngleIncrement: 10,
|
|
26
70
|
tickDuration: 200,
|
|
@@ -63,22 +107,34 @@ const createConfettiParticles = (config, screenWidth, screenHeight) => {
|
|
|
63
107
|
const particles = [];
|
|
64
108
|
const angleInRadians = degreesToRadians(config.angle);
|
|
65
109
|
const spreadInRadians = degreesToRadians(config.spread);
|
|
110
|
+
const timestamp = Date.now();
|
|
66
111
|
for (let i = 0; i < config.particleCount; i++) {
|
|
67
|
-
|
|
68
|
-
const
|
|
112
|
+
// Add spread variation to the angle
|
|
113
|
+
const spreadVariation = randomRange(-spreadInRadians / 2, spreadInRadians / 2);
|
|
114
|
+
const particleAngle = angleInRadians + spreadVariation;
|
|
115
|
+
// Randomize velocity within range
|
|
116
|
+
const velocityMagnitude = config.startVelocity * (0.5 + Math.random() * 0.5);
|
|
117
|
+
// Create confetti particles - broader and shorter like canvas-confetti
|
|
118
|
+
const baseWidth = (6 + Math.random() * 4) * config.scalar; // 6-10px wide (BROADER)
|
|
119
|
+
const aspectRatio = 0.5 + Math.random() * 0.3; // 0.5-0.8 ratio (SHORTER than wide)
|
|
69
120
|
const particle = {
|
|
70
|
-
id: `confetti-${i}-${
|
|
121
|
+
id: `confetti-${timestamp}-${i}-${Math.random()}`,
|
|
71
122
|
color: randomFromArray(config.colors),
|
|
72
123
|
shape: randomFromArray(config.shapes),
|
|
73
124
|
x: (config.origin.x ?? 0.5) * screenWidth,
|
|
74
125
|
y: (config.origin.y ?? 0.5) * screenHeight,
|
|
75
|
-
|
|
126
|
+
width: baseWidth,
|
|
127
|
+
height: baseWidth * aspectRatio,
|
|
128
|
+
// Height is SMALLER than width
|
|
76
129
|
velocity: {
|
|
77
|
-
|
|
78
|
-
|
|
130
|
+
// Canvas-confetti uses pixels per frame (60fps)
|
|
131
|
+
// Use velocity as-is for proper scaling to device
|
|
132
|
+
x: Math.cos(particleAngle) * velocityMagnitude,
|
|
133
|
+
y: -Math.sin(particleAngle) * velocityMagnitude // Negative = upward initially
|
|
79
134
|
},
|
|
80
135
|
rotation: Math.random() * 360,
|
|
81
|
-
rotationVelocity: randomRange(-
|
|
136
|
+
rotationVelocity: randomRange(-50, 50),
|
|
137
|
+
// Very wide range for dramatic spinning
|
|
82
138
|
tiltAngle: config.tilt ? Math.random() * config.tiltAngleIncrement : 0,
|
|
83
139
|
opacity: 1
|
|
84
140
|
};
|
|
@@ -96,7 +152,6 @@ const updateParticle = (particle, config, deltaTime) => {
|
|
|
96
152
|
|
|
97
153
|
// Apply gravity
|
|
98
154
|
const newVelocityY = particle.velocity.y - config.gravity * dt;
|
|
99
|
-
|
|
100
155
|
// Apply drift
|
|
101
156
|
const newVelocityX = particle.velocity.x + config.drift * dt;
|
|
102
157
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DEFAULT_COLORS","exports","DEFAULT_CONFIG","particleCount","angle","spread","startVelocity","decay","gravity","drift","duration","colors","scalar","origin","x","y","shapes","tilt","tiltAngleIncrement","tickDuration","disableForReducedMotion","usePerformanceMode","degreesToRadians","degrees","Math","PI","randomRange","min","max","random","randomFromArray","arr","item","floor","length","undefined","Error","createConfettiParticles","config","screenWidth","screenHeight","particles","angleInRadians","spreadInRadians","i","
|
|
1
|
+
{"version":3,"names":["DEFAULT_COLORS","exports","DEFAULT_CONFIG","particleCount","angle","spread","startVelocity","decay","gravity","drift","duration","colors","scalar","origin","x","y","shapes","tilt","tiltAngleIncrement","tickDuration","disableForReducedMotion","usePerformanceMode","degreesToRadians","degrees","Math","PI","randomRange","min","max","random","randomFromArray","arr","item","floor","length","undefined","Error","createConfettiParticles","config","screenWidth","screenHeight","particles","angleInRadians","spreadInRadians","timestamp","Date","now","i","spreadVariation","particleAngle","velocityMagnitude","baseWidth","aspectRatio","particle","id","color","shape","width","height","velocity","cos","sin","rotation","rotationVelocity","tiltAngle","opacity","push","updateParticle","deltaTime","dt","newVelocityY","newVelocityX","newX","newY","newRotation","newOpacity","pow"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,7 +11,6 @@ export const ConfettiCanvas = /*#__PURE__*/React.forwardRef(({
|
|
|
11
11
|
fullScreen = true
|
|
12
12
|
}, ref) => {
|
|
13
13
|
const [particles, setParticles] = useState([]);
|
|
14
|
-
const [activeCount, setActiveCount] = useState(0);
|
|
15
14
|
const {
|
|
16
15
|
width,
|
|
17
16
|
height
|
|
@@ -27,8 +26,11 @@ export const ConfettiCanvas = /*#__PURE__*/React.forwardRef(({
|
|
|
27
26
|
}
|
|
28
27
|
};
|
|
29
28
|
const newParticles = createConfettiParticles(mergedConfig, width, height);
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
const particlesWithConfig = newParticles.map(p => ({
|
|
30
|
+
...p,
|
|
31
|
+
config: mergedConfig
|
|
32
|
+
}));
|
|
33
|
+
setParticles(prev => [...prev, ...particlesWithConfig]);
|
|
32
34
|
|
|
33
35
|
// Resolve after the duration
|
|
34
36
|
setTimeout(() => {
|
|
@@ -38,7 +40,6 @@ export const ConfettiCanvas = /*#__PURE__*/React.forwardRef(({
|
|
|
38
40
|
}, [width, height]);
|
|
39
41
|
const reset = useCallback(() => {
|
|
40
42
|
setParticles([]);
|
|
41
|
-
setActiveCount(0);
|
|
42
43
|
}, []);
|
|
43
44
|
useImperativeHandle(ref, () => {
|
|
44
45
|
const confetti = fire;
|
|
@@ -46,13 +47,12 @@ export const ConfettiCanvas = /*#__PURE__*/React.forwardRef(({
|
|
|
46
47
|
return confetti;
|
|
47
48
|
}, [fire, reset]);
|
|
48
49
|
const handleParticleComplete = useCallback(particleId => {
|
|
49
|
-
setActiveCount(prev => prev - 1);
|
|
50
50
|
setParticles(prev => {
|
|
51
51
|
// Clean up completed particles periodically
|
|
52
52
|
if (prev.length > 100) {
|
|
53
53
|
return prev.filter(p => p.id !== particleId).slice(-50);
|
|
54
54
|
}
|
|
55
|
-
return prev;
|
|
55
|
+
return prev.filter(p => p.id !== particleId);
|
|
56
56
|
});
|
|
57
57
|
}, []);
|
|
58
58
|
return /*#__PURE__*/_jsx(View, {
|
|
@@ -62,7 +62,8 @@ export const ConfettiCanvas = /*#__PURE__*/React.forwardRef(({
|
|
|
62
62
|
pointerEvents: "none",
|
|
63
63
|
children: particles.map(particle => /*#__PURE__*/_jsx(ConfettiParticle, {
|
|
64
64
|
particle: particle,
|
|
65
|
-
|
|
65
|
+
config: particle.config,
|
|
66
|
+
duration: particle.config.duration,
|
|
66
67
|
onComplete: () => handleParticleComplete(particle.id)
|
|
67
68
|
}, particle.id))
|
|
68
69
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useImperativeHandle","useState","StyleSheet","View","useWindowDimensions","createConfettiParticles","DEFAULT_CONFIG","ConfettiParticle","jsx","_jsx","ConfettiCanvas","forwardRef","containerStyle","zIndex","fullScreen","ref","particles","setParticles","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useImperativeHandle","useState","StyleSheet","View","useWindowDimensions","createConfettiParticles","DEFAULT_CONFIG","ConfettiParticle","jsx","_jsx","ConfettiCanvas","forwardRef","containerStyle","zIndex","fullScreen","ref","particles","setParticles","width","height","fire","config","Promise","resolve","mergedConfig","origin","newParticles","particlesWithConfig","map","p","prev","setTimeout","duration","reset","confetti","handleParticleComplete","particleId","length","filter","id","slice","style","styles","container","pointerEvents","children","particle","onComplete","displayName","create","position","top","left","right","bottom"],"sourceRoot":"../../src","sources":["ConfettiCanvas.tsx"],"mappings":"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","ignoreList":[]}
|