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