svelte-confetti-explosion 0.0.4 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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 floor in pixels. Confetti will only fall within this height.
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 floorHeight = FLOOR_HEIGHT;
173
+ export let stageHeight = FLOOR_HEIGHT;
174
174
  /**
175
- * Width of the floor in pixels. Confetti will only fall within this width.
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 floorWidth = FLOOR_WIDTH;
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
- $: isValid = validate(particleCount, duration, colors, particleSize, force, floorHeight, floorWidth);
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, -floorWidth / 2, floorWidth / 2);
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: {floorHeight}px;">
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 floor in pixels. Confetti will only fall within this height.
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
- */ floorHeight?: number;
70
+ */ stageHeight?: number;
71
71
  /**
72
- * Width of the floor in pixels. Confetti will only fall within this width.
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
- */ floorWidth?: number;
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,187 @@
1
- # create-svelte
1
+ # svelte-confetti-explosion
2
2
 
3
- Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
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
- ## Creating a project
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
- If you're seeing this, you've probably already done this step. Congrats!
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
- # create a new project in the current directory
11
- npm init svelte@next
20
+ # pnpm
21
+ pnpm add svelte-confetti-explosion
12
22
 
13
- # create a new project in my-app
14
- npm init svelte@next my-app
23
+ # npm
24
+ npm install svelte-confetti-explosion
25
+
26
+ # yarn
27
+ yarn add svelte-confetti-explosion
15
28
  ```
16
29
 
17
- > Note: the `@next` is temporary
30
+ ## Usage
18
31
 
19
- ## Developing
32
+ Basic usage:
20
33
 
21
- Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
34
+ ```html
35
+ <script>
36
+ import { ConfettiExplosion } from 'svelte-confetti-explosion';
37
+ </script>
22
38
 
23
- ```bash
24
- npm run dev
39
+ <ConfettiExplosion />
40
+ ```
41
+
42
+ Customizing behavior with options:
25
43
 
26
- # or start the server and open the app in a new browser tab
27
- npm run dev -- --open
44
+ ```svelte
45
+ <ConfettiExplosion particleCount={200} force={0.3} />
28
46
  ```
29
47
 
30
- ## Building
48
+ ## Props
31
49
 
32
- Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
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
- ```bash
35
- npm run build
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} />
36
92
  ```
37
93
 
38
- > You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
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} />
148
+ ```
149
+
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
+ ## Performance
175
+
176
+ 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.
177
+
178
+ 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`.
179
+
180
+ ## License
181
+
182
+ MIT License
183
+ © [Puru Vijay](https://twitter.com/puruvjdev)
184
+
185
+ ```
186
+
187
+ ```
package/package.json CHANGED
@@ -1,26 +1,34 @@
1
1
  {
2
2
  "name": "svelte-confetti-explosion",
3
- "version": "0.0.4",
4
- "devDependencies": {
5
- "@sveltejs/kit": "^1.0.0-next.197",
6
- "prettier": "^2.4.1",
7
- "prettier-plugin-svelte": "^2.5.0",
8
- "sass": "^1.43.4",
9
- "svelte": "^3.44.2",
10
- "svelte-check": "^2.2.10",
11
- "svelte-preprocess": "^4.9.8",
12
- "svelte2tsx": "^0.4.10",
13
- "tslib": "^2.3.1",
14
- "typescript": "^4.5.2"
3
+ "version": "0.1.0",
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"
15
9
  },
16
- "type": "module",
17
- "dependencies": {
18
- "svelte-confetti-explosion": "0.0.3"
10
+ "sideEffects": false,
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "git+https://github.com/PuruVJ/svelte-confetti-explosion.git"
19
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",
20
29
  "exports": {
21
30
  "./package.json": "./package.json",
22
31
  "./ConfettiExplosion.svelte": "./ConfettiExplosion.svelte",
23
32
  ".": "./index.js"
24
- },
25
- "svelte": "./index.js"
33
+ }
26
34
  }