svelte-confetti-explosion 0.0.5 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- package/ConfettiExplosion.svelte +24 -19
- package/ConfettiExplosion.svelte.d.ts +15 -15
- package/README.md +175 -20
- package/package.json +24 -16
package/ConfettiExplosion.svelte
CHANGED
@@ -110,6 +110,18 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
|
|
110
110
|
* ```
|
111
111
|
*/
|
112
112
|
export let particleCount = PARTICLE_COUNT;
|
113
|
+
/**
|
114
|
+
* Size of the confetti particles in pixels
|
115
|
+
*
|
116
|
+
* @default 12
|
117
|
+
*
|
118
|
+
* @example
|
119
|
+
*
|
120
|
+
* ```svelte
|
121
|
+
* <ConfettiExplosion particleSize={20} />
|
122
|
+
* ```
|
123
|
+
*/
|
124
|
+
export let particleSize = SIZE;
|
113
125
|
/**
|
114
126
|
* Duration of the animation in milliseconds
|
115
127
|
*
|
@@ -135,18 +147,6 @@ export let duration = DURATION;
|
|
135
147
|
* ```
|
136
148
|
*/
|
137
149
|
export let colors = COLORS;
|
138
|
-
/**
|
139
|
-
* Size of the confetti particles in pixels
|
140
|
-
*
|
141
|
-
* @default 12
|
142
|
-
*
|
143
|
-
* @example
|
144
|
-
*
|
145
|
-
* ```svelte
|
146
|
-
* <ConfettiExplosion particleSize={20} />
|
147
|
-
* ```
|
148
|
-
*/
|
149
|
-
export let particleSize = SIZE;
|
150
150
|
/**
|
151
151
|
* Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
|
152
152
|
*
|
@@ -160,7 +160,7 @@ export let particleSize = SIZE;
|
|
160
160
|
*/
|
161
161
|
export let force = FORCE;
|
162
162
|
/**
|
163
|
-
* Height of the
|
163
|
+
* Height of the stage in pixels. Confetti will only fall within this height.
|
164
164
|
*
|
165
165
|
* @default 800
|
166
166
|
*
|
@@ -170,9 +170,9 @@ export let force = FORCE;
|
|
170
170
|
* <ConfettiExplosion floorHeight={500} />
|
171
171
|
* ```
|
172
172
|
*/
|
173
|
-
export let
|
173
|
+
export let stageHeight = FLOOR_HEIGHT;
|
174
174
|
/**
|
175
|
-
* Width of the
|
175
|
+
* Width of the stage in pixels. Confetti will only fall within this width.
|
176
176
|
*
|
177
177
|
* @default 1600
|
178
178
|
*
|
@@ -182,7 +182,7 @@ export let floorHeight = FLOOR_HEIGHT;
|
|
182
182
|
* <ConfettiExplosion floorWidth={1000} />
|
183
183
|
* ```
|
184
184
|
*/
|
185
|
-
export let
|
185
|
+
export let stageWidth = FLOOR_WIDTH;
|
186
186
|
/**
|
187
187
|
* Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
|
188
188
|
*
|
@@ -197,7 +197,11 @@ export let floorWidth = FLOOR_WIDTH;
|
|
197
197
|
export let shouldDestroyAfterDone = true;
|
198
198
|
let isVisible = true;
|
199
199
|
$: particles = createParticles(particleCount, colors);
|
200
|
-
|
200
|
+
// FOR FUN!!!
|
201
|
+
$: particleCount > 300 &&
|
202
|
+
console.log("[SVELTE-CONFETTI-EXPLOSION] That's a lot of confetti, you sure about that? A lesser number" +
|
203
|
+
' like 200 will still give off the party vibes while still not bricking the device 😉');
|
204
|
+
$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth);
|
201
205
|
onMount(async () => {
|
202
206
|
await waitFor(duration);
|
203
207
|
if (shouldDestroyAfterDone) {
|
@@ -206,7 +210,7 @@ onMount(async () => {
|
|
206
210
|
});
|
207
211
|
function confettiStyles(node, { degree }) {
|
208
212
|
// Get x landing point for it
|
209
|
-
const landingPoint = mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -
|
213
|
+
const landingPoint = mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -stageWidth / 2, stageWidth / 2);
|
210
214
|
// Crazy calculations for generating styles
|
211
215
|
const rotation = Math.random() * (ROTATION_SPEED_MAX - ROTATION_SPEED_MIN) + ROTATION_SPEED_MIN;
|
212
216
|
const rotationIndex = Math.round(Math.random() * (rotationTransforms.length - 1));
|
@@ -248,7 +252,7 @@ function confettiStyles(node, { degree }) {
|
|
248
252
|
</script>
|
249
253
|
|
250
254
|
{#if isVisible && isValid}
|
251
|
-
<div class="container" style="--floor-height: {
|
255
|
+
<div class="container" style="--floor-height: {stageHeight}px;">
|
252
256
|
{#each particles as { color, degree }}
|
253
257
|
<div class="particle" use:confettiStyles={{ degree }}>
|
254
258
|
<div style="--bgcolor: {color};" />
|
@@ -277,6 +281,7 @@ function confettiStyles(node, { degree }) {
|
|
277
281
|
height: 0;
|
278
282
|
overflow: visible;
|
279
283
|
position: relative;
|
284
|
+
transform: translate3d(var(--x, 0), var(--y, 0), 0);
|
280
285
|
z-index: 1200;
|
281
286
|
}
|
282
287
|
|
@@ -12,6 +12,17 @@ declare const __propDef: {
|
|
12
12
|
* <ConfettiExplosion particleCount={200} />
|
13
13
|
* ```
|
14
14
|
*/ particleCount?: number;
|
15
|
+
/**
|
16
|
+
* Size of the confetti particles in pixels
|
17
|
+
*
|
18
|
+
* @default 12
|
19
|
+
*
|
20
|
+
* @example
|
21
|
+
*
|
22
|
+
* ```svelte
|
23
|
+
* <ConfettiExplosion particleSize={20} />
|
24
|
+
* ```
|
25
|
+
*/ particleSize?: number;
|
15
26
|
/**
|
16
27
|
* Duration of the animation in milliseconds
|
17
28
|
*
|
@@ -35,17 +46,6 @@ declare const __propDef: {
|
|
35
46
|
* <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
|
36
47
|
* ```
|
37
48
|
*/ colors?: string[];
|
38
|
-
/**
|
39
|
-
* Size of the confetti particles in pixels
|
40
|
-
*
|
41
|
-
* @default 12
|
42
|
-
*
|
43
|
-
* @example
|
44
|
-
*
|
45
|
-
* ```svelte
|
46
|
-
* <ConfettiExplosion particleSize={20} />
|
47
|
-
* ```
|
48
|
-
*/ particleSize?: number;
|
49
49
|
/**
|
50
50
|
* Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
|
51
51
|
*
|
@@ -58,7 +58,7 @@ declare const __propDef: {
|
|
58
58
|
* ```
|
59
59
|
*/ force?: number;
|
60
60
|
/**
|
61
|
-
* Height of the
|
61
|
+
* Height of the stage in pixels. Confetti will only fall within this height.
|
62
62
|
*
|
63
63
|
* @default 800
|
64
64
|
*
|
@@ -67,9 +67,9 @@ declare const __propDef: {
|
|
67
67
|
* ```svelte
|
68
68
|
* <ConfettiExplosion floorHeight={500} />
|
69
69
|
* ```
|
70
|
-
*/
|
70
|
+
*/ stageHeight?: number;
|
71
71
|
/**
|
72
|
-
* Width of the
|
72
|
+
* Width of the stage in pixels. Confetti will only fall within this width.
|
73
73
|
*
|
74
74
|
* @default 1600
|
75
75
|
*
|
@@ -78,7 +78,7 @@ declare const __propDef: {
|
|
78
78
|
* ```svelte
|
79
79
|
* <ConfettiExplosion floorWidth={1000} />
|
80
80
|
* ```
|
81
|
-
*/
|
81
|
+
*/ stageWidth?: number;
|
82
82
|
/**
|
83
83
|
* Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
|
84
84
|
*
|
package/README.md
CHANGED
@@ -1,38 +1,193 @@
|
|
1
|
-
#
|
1
|
+
# svelte-confetti-explosion
|
2
2
|
|
3
|
-
|
3
|
+
Let's party 🎊🎊 with Svelte! svelte-confetti-explosion allows you to show an awesome confetti explosion on your page, with Svelte!
|
4
4
|
|
5
|
-
|
5
|
+
> This library is the svelte port of the amazing [@reonomy/react-confetti-explosion](https://www.npmjs.com/package/@reonomy/react-confetti-explosion) package. All the logic is from that package only, optimisation and Svelte code are mine 😉
|
6
6
|
|
7
|
-
|
7
|
+
## Features
|
8
|
+
|
9
|
+
- 🤏 Tiny - Less than 2.5KB min+gzip.
|
10
|
+
- 🐇 Simple - Quite simple to use, and effectively no-config required!
|
11
|
+
- 🧙♀️ Elegant - Use a Svelte component rather than setting things up in `onMount` hook.
|
12
|
+
- 🗃️ Highly customizable - Offers tons of options that you can modify to get different behaviors.
|
13
|
+
- 🖥️ SSR friendly - Works seamlessly in Sveltekit and other Server Side Rendering environments!
|
14
|
+
|
15
|
+
[Try it in Svelte REPL](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.44.2)
|
16
|
+
|
17
|
+
## Installing
|
8
18
|
|
9
19
|
```bash
|
10
|
-
#
|
11
|
-
|
20
|
+
# pnpm
|
21
|
+
pnpm add svelte-confetti-explosion
|
12
22
|
|
13
|
-
#
|
14
|
-
npm
|
23
|
+
# npm
|
24
|
+
npm install svelte-confetti-explosion
|
25
|
+
|
26
|
+
# yarn
|
27
|
+
yarn add svelte-confetti-explosion
|
15
28
|
```
|
16
29
|
|
17
|
-
|
30
|
+
## Usage
|
18
31
|
|
19
|
-
|
32
|
+
Basic usage:
|
20
33
|
|
21
|
-
|
34
|
+
```html
|
35
|
+
<script>
|
36
|
+
import { ConfettiExplosion } from 'svelte-confetti-explosion';
|
37
|
+
</script>
|
22
38
|
|
23
|
-
|
24
|
-
|
39
|
+
<ConfettiExplosion />
|
40
|
+
```
|
41
|
+
|
42
|
+
Customizing behavior with options:
|
25
43
|
|
26
|
-
|
27
|
-
|
44
|
+
```svelte
|
45
|
+
<ConfettiExplosion particleCount={200} force={0.3} />
|
28
46
|
```
|
29
47
|
|
30
|
-
##
|
48
|
+
## Props
|
31
49
|
|
32
|
-
|
50
|
+
There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
|
33
51
|
|
34
|
-
|
35
|
-
|
52
|
+
### particleCount
|
53
|
+
|
54
|
+
Number of confetti particles to create.
|
55
|
+
|
56
|
+
**type:** `number`
|
57
|
+
|
58
|
+
**Default value:** 150
|
59
|
+
|
60
|
+
**Example:**
|
61
|
+
|
62
|
+
```svelte
|
63
|
+
<ConfettiExplosion particleCount={200} />
|
64
|
+
```
|
65
|
+
|
66
|
+
### particleSize
|
67
|
+
|
68
|
+
Size of the confetti particles in pixels
|
69
|
+
|
70
|
+
**type:** `number`
|
71
|
+
|
72
|
+
**Default value:** 12
|
73
|
+
|
74
|
+
**Example:**
|
75
|
+
|
76
|
+
```svelte
|
77
|
+
<ConfettiExplosion particleSize={20} />
|
78
|
+
```
|
79
|
+
|
80
|
+
### duration
|
81
|
+
|
82
|
+
Duration of the animation in milliseconds
|
83
|
+
|
84
|
+
**type:** `number`
|
85
|
+
|
86
|
+
**Default value:** 3500
|
87
|
+
|
88
|
+
**Example:**
|
89
|
+
|
90
|
+
```svelte
|
91
|
+
<ConfettiExplosion duration={5000} />
|
92
|
+
```
|
93
|
+
|
94
|
+
### colors
|
95
|
+
|
96
|
+
Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
|
97
|
+
|
98
|
+
**type:** `Array<string>`
|
99
|
+
|
100
|
+
**Default value:** `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']`
|
101
|
+
|
102
|
+
**Example:**
|
103
|
+
|
104
|
+
```svelte
|
105
|
+
<ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
|
106
|
+
```
|
107
|
+
|
108
|
+
### force
|
109
|
+
|
110
|
+
Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
|
111
|
+
|
112
|
+
**type:** `number`
|
113
|
+
|
114
|
+
**Default value:** 0.5
|
115
|
+
|
116
|
+
**Example:**
|
117
|
+
|
118
|
+
```svelte
|
119
|
+
<ConfettiExplosion force={0.3} />
|
120
|
+
```
|
121
|
+
|
122
|
+
### stageHeight
|
123
|
+
|
124
|
+
Height of the stage in pixels. Confetti will only fall within this height.
|
125
|
+
|
126
|
+
**type:** `number`
|
127
|
+
|
128
|
+
**Default value:** 800
|
129
|
+
|
130
|
+
**Example:**
|
131
|
+
|
132
|
+
```svelte
|
133
|
+
<ConfettiExplosion stageHeight={500} />
|
134
|
+
```
|
135
|
+
|
136
|
+
### stageWidth
|
137
|
+
|
138
|
+
Width of the stage in pixels. Confetti will only fall within this width.
|
139
|
+
|
140
|
+
**type:** `number`
|
141
|
+
|
142
|
+
**Default value:** 1600
|
143
|
+
|
144
|
+
**Example:**
|
145
|
+
|
146
|
+
```svelte
|
147
|
+
<ConfettiExplosion stageWidth={500} />
|
36
148
|
```
|
37
149
|
|
38
|
-
|
150
|
+
### shouldDestroyAfterDone
|
151
|
+
|
152
|
+
Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.
|
153
|
+
|
154
|
+
**type:** `boolean`
|
155
|
+
|
156
|
+
**Default value:** `true`
|
157
|
+
|
158
|
+
**Example:**
|
159
|
+
|
160
|
+
```svelte
|
161
|
+
<ConfettiExplosion shouldDestroyAfterDone={false} />
|
162
|
+
```
|
163
|
+
|
164
|
+
## Style Props
|
165
|
+
|
166
|
+
You can specify two style props on the component: `--x` and `--y`. These will shift the confetti particles on the x and y axis. by how much you specify, These can be in `px`, `em`, `rem`, `vh`, `vw`, literally any valid CSS unit.
|
167
|
+
|
168
|
+
**USAGE:**
|
169
|
+
|
170
|
+
```svelte
|
171
|
+
<ConfettiExplosion --x="10px" --y="10px" />
|
172
|
+
```
|
173
|
+
|
174
|
+
## Examples
|
175
|
+
|
176
|
+
[Basic Example](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.44.2)
|
177
|
+
|
178
|
+
[Confetti where mouse click](https://svelte.dev/repl/dbe0ab06c34f4f25aa6f948fdd1982c7?version=3.44.2)
|
179
|
+
|
180
|
+
## Performance
|
181
|
+
|
182
|
+
This library functions by creating 2 DOM nodes for every single confetti. By default, if the `particlesCount` is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.
|
183
|
+
|
184
|
+
Also, after the specified `duration`, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set `shouldDestroyAfterDone` to `false`.
|
185
|
+
|
186
|
+
## License
|
187
|
+
|
188
|
+
MIT License
|
189
|
+
© [Puru Vijay](https://twitter.com/puruvjdev)
|
190
|
+
|
191
|
+
```
|
192
|
+
|
193
|
+
```
|
package/package.json
CHANGED
@@ -1,23 +1,31 @@
|
|
1
1
|
{
|
2
2
|
"name": "svelte-confetti-explosion",
|
3
|
-
"version": "0.
|
4
|
-
"
|
5
|
-
"
|
6
|
-
|
7
|
-
|
8
|
-
"
|
9
|
-
"sass": "^1.43.4",
|
10
|
-
"svelte": "^3.44.2",
|
11
|
-
"svelte-check": "^2.2.10",
|
12
|
-
"svelte-preprocess": "^4.9.8",
|
13
|
-
"svelte2tsx": "^0.4.10",
|
14
|
-
"tslib": "^2.3.1",
|
15
|
-
"typescript": "^4.5.2"
|
3
|
+
"version": "0.1.1",
|
4
|
+
"description": "Confetti explosion in Svelte 🎉🎊",
|
5
|
+
"author": "Puru Vijay",
|
6
|
+
"license": "MIT",
|
7
|
+
"bugs": {
|
8
|
+
"url": "https://github.com/PuruVJ/svelte-confetti-explosion/issues"
|
16
9
|
},
|
17
|
-
"
|
18
|
-
"
|
19
|
-
"
|
10
|
+
"sideEffects": false,
|
11
|
+
"repository": {
|
12
|
+
"type": "git",
|
13
|
+
"url": "git+https://github.com/PuruVJ/svelte-confetti-explosion.git"
|
20
14
|
},
|
15
|
+
"svelte": "index.js",
|
16
|
+
"keywords": [
|
17
|
+
"confetti",
|
18
|
+
"party",
|
19
|
+
"fun",
|
20
|
+
"badass",
|
21
|
+
"badassery",
|
22
|
+
"svelte",
|
23
|
+
"sveltekit",
|
24
|
+
"small",
|
25
|
+
"tiny",
|
26
|
+
"performant"
|
27
|
+
],
|
28
|
+
"type": "module",
|
21
29
|
"exports": {
|
22
30
|
"./package.json": "./package.json",
|
23
31
|
"./ConfettiExplosion.svelte": "./ConfettiExplosion.svelte",
|