Skip to content

Commit 8389654

Browse files
matteobrunimatteobruni
committed
build: updated docs
1 parent 2f67409 commit 8389654

File tree

5 files changed

+195
-168
lines changed

5 files changed

+195
-168
lines changed

‎README.md‎

Lines changed: 60 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ yarn add react-particles
2626

2727
Starting from version 1.17.0 there are two official `create-react-app` templates:
2828

29-
- `cra-template-particles`: Simple ReactJS template with full screen particles, using JavaScript
30-
- `cra-template-particles-typescript`: Simple ReactJS template with full screen particles, using TypeScript
29+
- `cra-template-particles`: Simple ReactJS template with full screen particles, using JavaScript
30+
- `cra-template-particles-typescript`: Simple ReactJS template with full screen particles, using TypeScript
3131

3232
You can simply install them using the `create-react-app` command like this:
3333

@@ -54,15 +54,17 @@ Examples:
5454
```jsx
5555
import { useCallback } from "react";
5656
import Particles from "react-particles";
57-
import { loadFull } from "tsparticles";
57+
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
58+
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
5859

5960
const App = () => {
6061
const particlesInit = useCallback(async engine => {
6162
console.log(engine);
6263
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
6364
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
6465
// starting from v2 you can add only the features you need reducing the bundle size
65-
await loadFull(engine);
66+
//await loadFull(engine);
67+
await loadSlim(engine);
6668
}, []);
6769

6870
const particlesLoaded = useCallback(async container => {
@@ -81,7 +83,8 @@ const App = () => {
8183
import { useCallback } from "react";
8284
import Particles from "react-particles";
8385
import type { Container, Engine } from "tsparticles-engine";
84-
import { loadFull } from "tsparticles";
86+
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
87+
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
8588

8689
const App = () => {
8790
const particlesInit = useCallback(async (engine: Engine) => {
@@ -90,7 +93,8 @@ const App = () => {
9093
// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
9194
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
9295
// starting from v2 you can add only the features you need reducing the bundle size
93-
await loadFull(engine);
96+
//await loadFull(engine);
97+
await loadSlim(engine);
9498
}, []);
9599

96100
const particlesLoaded = useCallback(async (container: Container | undefined) => {
@@ -110,15 +114,17 @@ const App = () => {
110114
```jsx
111115
import { useCallback } from "react";
112116
import Particles from "react-particles";
113-
import { loadFull } from "tsparticles";
117+
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
118+
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
114119

115120
const App = () => {
116121
const particlesInit = useCallback(async engine => {
117122
console.log(engine);
118123
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
119124
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
120125
// starting from v2 you can add only the features you need reducing the bundle size
121-
await loadFull(engine);
126+
//await loadFull(engine);
127+
await loadSlim(engine);
122128
}, []);
123129

124130
const particlesLoaded = useCallback(async container => {
@@ -133,74 +139,71 @@ const App = () => {
133139
options={{
134140
background: {
135141
color: {
136-
value: "#0d47a1",
137-
},
142+
value: "#0d47a1"
143+
}
138144
},
139145
fpsLimit: 120,
140146
interactivity: {
141147
events: {
142148
onClick: {
143149
enable: true,
144-
mode: "push",
150+
mode: "push"
145151
},
146152
onHover: {
147153
enable: true,
148-
mode: "repulse",
154+
mode: "repulse"
149155
},
150-
resize: true,
156+
resize: true
151157
},
152158
modes: {
153159
push: {
154-
quantity: 4,
160+
quantity: 4
155161
},
156162
repulse: {
157163
distance: 200,
158-
duration: 0.4,
159-
},
160-
},
164+
duration: 0.4
165+
}
166+
}
161167
},
162168
particles: {
163169
color: {
164-
value: "#ffffff",
170+
value: "#ffffff"
165171
},
166172
links: {
167173
color: "#ffffff",
168174
distance: 150,
169175
enable: true,
170176
opacity: 0.5,
171-
width: 1,
172-
},
173-
collisions: {
174-
enable: true,
177+
width: 1
175178
},
176179
move: {
177180
direction: "none",
178181
enable: true,
179182
outModes: {
180-
default: "bounce",
183+
default: "bounce"
181184
},
182185
random: false,
183186
speed: 6,
184-
straight: false,
187+
straight: false
185188
},
186189
number: {
187190
density: {
188191
enable: true,
189-
area: 800,
192+
area: 800
190193
},
191-
value: 80,
194+
value: 80
192195
},
193196
opacity: {
194-
value: 0.5,
197+
value: 0.5
195198
},
196199
shape: {
197-
type: "circle",
200+
type: "circle"
198201
},
199202
size: {
200-
value: { min: 1, max: 5 },
201-
},
203+
value: { min: 1, max: 5 }
204+
}
202205
},
203-
detectRetina: true,
206+
detectRetina: true
204207
}}
205208
/>
206209
);
@@ -213,7 +216,8 @@ const App = () => {
213216
import { useCallback } from "react";
214217
import type { Container, Engine } from "tsparticles-engine";
215218
import Particles from "react-particles";
216-
import { loadFull } from "tsparticles";
219+
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
220+
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
217221

218222
const App = () => {
219223
const particlesInit = useCallback(async (engine: Engine) => {
@@ -222,7 +226,8 @@ const App = () => {
222226
// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
223227
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
224228
// starting from v2 you can add only the features you need reducing the bundle size
225-
await loadFull(engine);
229+
//await loadFull(engine);
230+
await loadSlim(engine);
226231
}, []);
227232

228233
const particlesLoaded = useCallback(async (container: Container | undefined) => {
@@ -236,74 +241,71 @@ const App = () => {
236241
options={{
237242
background: {
238243
color: {
239-
value: "#0d47a1",
240-
},
244+
value: "#0d47a1"
245+
}
241246
},
242247
fpsLimit: 120,
243248
interactivity: {
244249
events: {
245250
onClick: {
246251
enable: true,
247-
mode: "push",
252+
mode: "push"
248253
},
249254
onHover: {
250255
enable: true,
251-
mode: "repulse",
256+
mode: "repulse"
252257
},
253-
resize: true,
258+
resize: true
254259
},
255260
modes: {
256261
push: {
257-
quantity: 4,
262+
quantity: 4
258263
},
259264
repulse: {
260265
distance: 200,
261-
duration: 0.4,
262-
},
263-
},
266+
duration: 0.4
267+
}
268+
}
264269
},
265270
particles: {
266271
color: {
267-
value: "#ffffff",
272+
value: "#ffffff"
268273
},
269274
links: {
270275
color: "#ffffff",
271276
distance: 150,
272277
enable: true,
273278
opacity: 0.5,
274-
width: 1,
275-
},
276-
collisions: {
277-
enable: true,
279+
width: 1
278280
},
279281
move: {
280282
direction: "none",
281283
enable: true,
282284
outModes: {
283-
default: "bounce",
285+
default: "bounce"
284286
},
285287
random: false,
286288
speed: 6,
287-
straight: false,
289+
straight: false
288290
},
289291
number: {
290292
density: {
291293
enable: true,
292-
area: 800,
294+
area: 800
293295
},
294-
value: 80,
296+
value: 80
295297
},
296298
opacity: {
297-
value: 0.5,
299+
value: 0.5
298300
},
299301
shape: {
300-
type: "circle",
302+
type: "circle"
301303
},
302304
size: {
303-
value: { min: 1, max: 5 },
304-
},
305+
value: { min: 1, max: 5 }
306+
}
305307
},
306-
detectRetina: true,
308+
detectRetina: true
307309
}}
308310
/>
309311
);
@@ -313,7 +315,7 @@ const App = () => {
313315
### Props
314316

315317
| Prop | Type | Definition |
316-
|-----------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
318+
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
317319
| id | string | The id of the element. |
318320
| width | string | The width of the canvas. |
319321
| height | string | The height of the canvas. |
@@ -328,8 +330,7 @@ const App = () => {
328330

329331
#### particles.json
330332

331-
Find all configuration
332-
options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
333+
Find all configuration options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
333334

334335
You can find sample configurations [here](https://github.com/matteobruni/tsparticles/tree/main/utils/configs/src) 📖
335336

0 commit comments

Comments
 (0)