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