1 | [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
|
2 |
|
3 | # tsParticles All Bundle
|
4 |
|
5 | [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-all/badge)](https://www.jsdelivr.com/package/npm/tsparticles-all) [![npmjs](https://badge.fury.io/js/tsparticles-all.svg)](https://www.npmjs.com/package/tsparticles-all) [![npmjs](https://img.shields.io/npm/dt/tsparticles-all)](https://www.npmjs.com/package/tsparticles-all) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
|
6 |
|
7 | [tsParticles](https://github.com/matteobruni/tsparticles) all bundle loads all the features to a `tsparticles-engine` instance.
|
8 |
|
9 | **Included Packages**
|
10 |
|
11 | - [tsparticles (and all its dependencies)](https://github.com/matteobruni/tsparticles/tree/main/bundles/full)
|
12 | - [tsparticles-interaction-light](https://github.com/matteobruni/tsparticles/tree/main/interactions/light)
|
13 | - [tsparticles-interaction-particles-repulse](https://github.com/matteobruni/tsparticles/tree/main/interactions/particles/repulse)
|
14 | - [tsparticles-path-curves](https://github.com/matteobruni/tsparticles/tree/main/paths/curves)
|
15 | - [tsparticles-path-perlin-noise](https://github.com/matteobruni/tsparticles/tree/main/paths/perlinNoise)
|
16 | - [tsparticles-path-polygon](https://github.com/matteobruni/tsparticles/tree/main/paths/polygon)
|
17 | - [tsparticles-path-simplex-noise](https://github.com/matteobruni/tsparticles/tree/main/paths/simplexNoise)
|
18 | - [tsparticles-path-svg](https://github.com/matteobruni/tsparticles/tree/main/paths/svg)
|
19 | - [tsparticles-plugin-canvas-mask](https://github.com/matteobruni/tsparticles/tree/main/plugins/canvasMask)
|
20 | - [tsparticles-plugin-easing-back](https://github.com/matteobruni/tsparticles/tree/main/plugins/easings/back)
|
21 | - [tsparticles-plugin-easing-circ](https://github.com/matteobruni/tsparticles/tree/main/plugins/easings/circ)
|
22 | - [tsparticles-plugin-easing-cubic](https://github.com/matteobruni/tsparticles/tree/main/plugins/easings/cubic)
|
23 | - [tsparticles-plugin-easing-expo](https://github.com/matteobruni/tsparticles/tree/main/plugins/easings/expo)
|
24 | - [tsparticles-plugin-easing-quart](https://github.com/matteobruni/tsparticles/tree/main/plugins/easings/quart)
|
25 | - [tsparticles-plugin-easing-quint](https://github.com/matteobruni/tsparticles/tree/main/plugins/easings/quint)
|
26 | - [tsparticles-plugin-easing-sine](https://github.com/matteobruni/tsparticles/tree/main/plugins/easings/sine)
|
27 | - [tsparticles-plugin-export-image](https://github.com/matteobruni/tsparticles/tree/main/plugins/exports/image)
|
28 | - [tsparticles-plugin-export-json](https://github.com/matteobruni/tsparticles/tree/main/plugins/exports/json)
|
29 | - [tsparticles-plugin-export-video](https://github.com/matteobruni/tsparticles/tree/main/plugins/exports/video)
|
30 | - [tsparticles-plugin-hsv-color](https://github.com/matteobruni/tsparticles/tree/main/plugins/hsvColor)
|
31 | - [tsparticles-plugin-infection](https://github.com/matteobruni/tsparticles/tree/main/plugins/infection)
|
32 | - [tsparticles-plugin-motion](https://github.com/matteobruni/tsparticles/tree/main/plugins/motion)
|
33 | - [tsparticles-plugin-polygon-mask](https://github.com/matteobruni/tsparticles/tree/main/plugins/polygonMask)
|
34 | - [tsparticles-plugin-sounds](https://github.com/matteobruni/tsparticles/tree/main/plugins/sounds)
|
35 | - [tsparticles-shape-arrow](https://github.com/matteobruni/tsparticles/tree/main/shapes/arrow)
|
36 | - [tsparticles-shape-bubble](https://github.com/matteobruni/tsparticles/tree/main/shapes/bubble)
|
37 | - [tsparticles-shape-cards](https://github.com/matteobruni/tsparticles/tree/main/shapes/cards)
|
38 | - [tsparticles-shape-cog](https://github.com/matteobruni/tsparticles/tree/main/shapes/cog)
|
39 | - [tsparticles-shape-heart](https://github.com/matteobruni/tsparticles/tree/main/shapes/heart)
|
40 | - [tsparticles-shape-multiline-text](https://github.com/matteobruni/tsparticles/tree/main/shapes/multiline-text)
|
41 | - [tsparticles-shape-path](https://github.com/matteobruni/tsparticles/tree/main/shapes/path)
|
42 | - [tsparticles-shape-rounded-polygon](https://github.com/matteobruni/tsparticles/tree/main/shapes/polygon)
|
43 | - [tsparticles-shape-rounded-rect](https://github.com/matteobruni/tsparticles/tree/main/shapes/rect)
|
44 | - [tsparticles-shape-spiral](https://github.com/matteobruni/tsparticles/tree/main/shapes/spiral)
|
45 | - [tsparticles-updater-gradient](https://github.com/matteobruni/tsparticles/tree/main/updaters/gradient)
|
46 | - [tsparticles-updater-orbit](https://github.com/matteobruni/tsparticles/tree/main/updaters/orbit)
|
47 |
|
48 | ## How to use it
|
49 |
|
50 | ### CDN / Vanilla JS / jQuery
|
51 |
|
52 | The CDN/Vanilla version JS has two different files:
|
53 |
|
54 | - One is a bundle file with all the scripts included in a single file
|
55 | - One is a file including just the `loadAll` function to load the tsParticles all preset, all dependencies must be
|
56 | included manually
|
57 |
|
58 | #### Bundle
|
59 |
|
60 | Including the `tsparticles.all.bundle.min.js` file will work exactly like `v1`, you can start using the `tsParticles`
|
61 | instance in the same way.
|
62 |
|
63 | This is the easiest usage, since it's a single file with the some of the `v1` features.
|
64 |
|
65 | All new features will be added as external packages, this bundle is recommended for migrating from `v1` easily.
|
66 |
|
67 | #### Not Bundle
|
68 |
|
69 | This installation requires more work since all dependencies must be included in the page. Some lines above are all
|
70 | specified in the **Included Packages** section.
|
71 |
|
72 | ### Usage
|
73 |
|
74 | Once the scripts are loaded you can set up `tsParticles` like this:
|
75 |
|
76 | ```javascript
|
77 | (async () => {
|
78 | await loadAll(tsParticles); // not needed if using the bundle script, required for any other installation
|
79 |
|
80 | await tsParticles.load({
|
81 | id: "tsparticles",
|
82 | options: {
|
83 | /* options */
|
84 | },
|
85 | });
|
86 | })();
|
87 | ```
|
88 |
|
89 | ### React.js / Preact / Inferno
|
90 |
|
91 | _The syntax for `React.js`, `Preact` and `Inferno` is the same_.
|
92 |
|
93 | This sample uses the class component syntax, but you can use hooks as well (if the library supports it).
|
94 |
|
95 | _Class Components_
|
96 |
|
97 | ```typescript jsx
|
98 | import React from "react";
|
99 | import Particles from "react-particles";
|
100 | import type { Engine } from "tsparticles-engine";
|
101 | import { loadAll } from "tsparticles-all";
|
102 |
|
103 | export class ParticlesContainer extends PureComponent<unknown> {
|
104 | // this customizes the component tsParticles installation
|
105 | async customInit(engine: Engine) {
|
106 | // this adds the bundle to tsParticles
|
107 | await loadAll(engine);
|
108 | }
|
109 |
|
110 | render() {
|
111 | const options = {
|
112 | /* custom options */
|
113 | };
|
114 |
|
115 | return <Particles options={options} init={this.customInit} />;
|
116 | }
|
117 | }
|
118 | ```
|
119 |
|
120 | _Hooks / Functional Components_
|
121 |
|
122 | ```typescript jsx
|
123 | import React, { useCallback } from "react";
|
124 | import Particles from "react-particles";
|
125 | import type { Engine } from "tsparticles-engine";
|
126 | import { loadAll } from "tsparticles-all";
|
127 |
|
128 | export function ParticlesContainer(props: unknown) {
|
129 | // this customizes the component tsParticles installation
|
130 | const customInit = useCallback(async (engine: Engine) => {
|
131 | // this adds the bundle to tsParticles
|
132 | await loadAll(engine);
|
133 | });
|
134 |
|
135 | const options = {
|
136 | /* custom options */
|
137 | };
|
138 |
|
139 | return <Particles options={options} init={this.customInit} />;
|
140 | }
|
141 | ```
|
142 |
|
143 | ### Vue (2.x and 3.x)
|
144 |
|
145 | _The syntax for `Vue.js 2.x` and `3.x` is the same_
|
146 |
|
147 | ```vue
|
148 | <Particles id="tsparticles" :particlesInit="particlesInit" :options="options" />
|
149 | ```
|
150 |
|
151 | ```js
|
152 | const options = {
|
153 | /* custom options */
|
154 | };
|
155 |
|
156 | async function particlesInit(engine: Engine) {
|
157 | await loadAll(engine);
|
158 | }
|
159 | ```
|
160 |
|
161 | ### Angular
|
162 |
|
163 | ```html
|
164 | <ng-particles [id]="id" [options]="options" [particlesInit]="particlesInit"></ng-particles>
|
165 | ```
|
166 |
|
167 | ```ts
|
168 | const options = {
|
169 | /* custom options */
|
170 | };
|
171 |
|
172 | async function particlesInit(engine: Engine): void {
|
173 | await loadAll(engine);
|
174 | }
|
175 | ```
|
176 |
|
177 | ### Svelte
|
178 |
|
179 | ```sveltehtml
|
180 |
|
181 | <Particles
|
182 | id="tsparticles"
|
183 | options={options}
|
184 | particlesInit="{particlesInit}"
|
185 | />
|
186 | ```
|
187 |
|
188 | ```js
|
189 | let options = {
|
190 | /* custom options */
|
191 | };
|
192 |
|
193 | let particlesInit = async (engine) => {
|
194 | await loadAll(engine);
|
195 | };
|
196 | ```
|