Skip to content

Commit b9aa7b9

Browse files
matteobrunimatteobruni
committed
build: fixed particles hook
1 parent c05d16e commit b9aa7b9

File tree

6 files changed

+140
-156
lines changed

6 files changed

+140
-156
lines changed

‎apps/nextjs/pages/index.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import Image from "next/image";
33
import Particles, { useParticlesPlugins } from "@tsparticles/react";
44
import { loadBigCirclesPreset } from "@tsparticles/preset-big-circles";
55
import styles from "../styles/Home.module.css";
6-
import { useState } from "react";
6+
import { useCallback, useState } from "react";
77
import { isSsr } from "@tsparticles/engine";
88

99
export default function Home() {
10-
const [init, setInit] = useState(false);
11-
const { done, error } = useParticlesPlugins(async (engine) => {
10+
const particlesInitCb = useCallback(async (engine) => {
1211
await loadBigCirclesPreset(engine);
13-
});
12+
}, []);
13+
14+
const [init, setInit] = useState(false);
15+
const { done, error } = useParticlesPlugins(particlesInitCb);
1416

1517
if (isSsr() || error || !done) {
1618
return <></>;

‎apps/react/src/App.js‎

Lines changed: 82 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,108 @@
11
import Particles, { useParticlesPlugins } from "@tsparticles/react";
22
import { loadFull } from "tsparticles";
3-
import { useCallback, useMemo, useRef, useState } from "react";
3+
import { useCallback, useMemo, useRef } from "react";
44
import logo from "./logo.svg";
55
import "./App.css";
66

77
function App() {
8-
const containerRef = useRef(null);
9-
const [init, setInit] = useState(false);
10-
const { done, error } = useParticlesPlugins(async (engine) => {
11-
await loadFull(engine);
12-
});
8+
const containerRef = useRef(null),
9+
initParticlesCb = useCallback(async (engine) => {
10+
await loadFull(engine);
11+
}, []),
12+
{ done } = useParticlesPlugins(initParticlesCb),
13+
particlesLoaded = useCallback(
14+
(container) => {
15+
containerRef.current = container;
1316

14-
console.log({ error, done, init });
15-
16-
if ((!error && !done) || !init) {
17-
setInit(done);
18-
}
19-
20-
const particlesLoaded = useCallback(
21-
(container) => {
22-
containerRef.current = container;
23-
24-
window.particlesContainer = container;
25-
},
26-
[containerRef]
27-
);
28-
29-
const options = useMemo(
30-
() => ({
31-
fullScreen: {
32-
zIndex: -1,
17+
window.particlesContainer = container;
3318
},
34-
particles: {
35-
number: {
36-
value: 100,
37-
},
38-
links: {
39-
enable: true,
19+
[containerRef]
20+
),
21+
options = useMemo(
22+
() => ({
23+
fullScreen: {
24+
zIndex: -1,
4025
},
41-
move: {
42-
enable: true,
43-
},
44-
},
45-
themes: [
46-
{
47-
name: "light",
48-
default: {
49-
value: true,
50-
auto: true,
51-
mode: "light",
26+
particles: {
27+
number: {
28+
value: 100,
29+
},
30+
links: {
31+
enable: true,
5232
},
53-
options: {
54-
background: {
55-
color: "#ffffff",
33+
move: {
34+
enable: true,
35+
},
36+
},
37+
themes: [
38+
{
39+
name: "light",
40+
default: {
41+
value: true,
42+
auto: true,
43+
mode: "light",
5644
},
57-
particles: {
58-
color: {
59-
value: "#000000",
45+
options: {
46+
background: {
47+
color: "#ffffff",
6048
},
61-
links: {
62-
color: "#000000",
49+
particles: {
50+
color: {
51+
value: "#000000",
52+
},
53+
links: {
54+
color: "#000000",
55+
},
6356
},
6457
},
6558
},
66-
},
67-
{
68-
name: "dark",
69-
default: {
70-
value: true,
71-
auto: true,
72-
mode: "dark",
73-
},
74-
options: {
75-
background: {
76-
color: "#000000",
59+
{
60+
name: "dark",
61+
default: {
62+
value: true,
63+
auto: true,
64+
mode: "dark",
7765
},
78-
particles: {
79-
color: {
80-
value: "#ffffff",
66+
options: {
67+
background: {
68+
color: "#000000",
8169
},
82-
links: {
83-
color: "#ffffff",
70+
particles: {
71+
color: {
72+
value: "#ffffff",
73+
},
74+
links: {
75+
color: "#ffffff",
76+
},
8477
},
8578
},
8679
},
87-
},
88-
],
89-
}),
90-
[]
91-
);
92-
93-
const lightTheme = useCallback(() => {
94-
if (!containerRef.current) {
95-
return;
96-
}
97-
98-
console.log(containerRef.current);
80+
],
81+
}),
82+
[]
83+
),
84+
lightTheme = useCallback(() => {
85+
if (!containerRef.current) {
86+
return;
87+
}
9988

100-
setTimeout(() => {
101-
containerRef.current.loadTheme("light");
102-
}, 500);
103-
}, [containerRef]);
89+
console.log(containerRef.current);
10490

105-
const darkTheme = useCallback(() => {
106-
if (!containerRef.current) {
107-
return;
108-
}
91+
setTimeout(() => {
92+
containerRef.current.loadTheme("light");
93+
}, 500);
94+
}, [containerRef]),
95+
darkTheme = useCallback(() => {
96+
if (!containerRef.current) {
97+
return;
98+
}
10999

110-
console.log(containerRef.current);
100+
console.log(containerRef.current);
111101

112-
setTimeout(() => {
113-
containerRef.current.loadTheme("dark");
114-
}, 500);
115-
}, [containerRef]);
102+
setTimeout(() => {
103+
containerRef.current.loadTheme("dark");
104+
}, 500);
105+
}, [containerRef]);
116106

117107
return (
118108
<div className="App">
@@ -136,7 +126,7 @@ function App() {
136126
Dark
137127
</button>
138128
</header>
139-
{init && (
129+
{done && (
140130
<Particles
141131
id="tsparticles"
142132
loaded={particlesLoaded}

‎components/react/README.md‎

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,22 @@ import Particles from "@tsparticles/react";
5858
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
5959

6060
const App = () => {
61-
const particlesInit = useCallback(async engine => {
62-
console.log(engine);
63-
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
61+
const initParticlesCb = useCallback(async (engine) => {
62+
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
6463
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
6564
// starting from v2 you can add only the features you need reducing the bundle size
6665
//await loadFull(engine);
6766
await loadSlim(engine);
6867
}, []);
6968

69+
const { done, error } = useParticlesPlugins(initParticlesCb);
70+
7071
const particlesLoaded = useCallback(async container => {
7172
await console.log(container);
7273
}, []);
7374

7475
return (
75-
<Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
76+
{done && <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={particlesLoaded} />}
7677
);
7778
};
7879
```
@@ -87,22 +88,22 @@ import type { Container, Engine } from "@tsparticles/engine";
8788
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
8889

8990
const App = () => {
90-
const particlesInit = useCallback(async (engine: Engine) => {
91-
console.log(engine);
92-
93-
// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
91+
const initParticlesCb = useCallback(async (engine: Engine) => {
92+
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
9493
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
9594
// starting from v2 you can add only the features you need reducing the bundle size
9695
//await loadFull(engine);
9796
await loadSlim(engine);
9897
}, []);
9998

100-
const particlesLoaded = useCallback(async (container: Container | undefined) => {
99+
const { done, error } = useParticlesPlugins(initParticlesCb);
100+
101+
const particlesLoaded = useCallback(async (container: Container) => {
101102
await console.log(container);
102103
}, []);
103104

104105
return (
105-
<Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
106+
{done && <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={particlesLoaded} />}
106107
);
107108
};
108109
```
@@ -118,24 +119,24 @@ import Particles from "@tsparticles/react";
118119
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
119120

120121
const App = () => {
121-
const particlesInit = useCallback(async engine => {
122-
console.log(engine);
123-
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
122+
const initParticlesCb = useCallback(async (engine) => {
123+
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
124124
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
125125
// starting from v2 you can add only the features you need reducing the bundle size
126126
//await loadFull(engine);
127127
await loadSlim(engine);
128128
}, []);
129129

130+
const { done, error } = useParticlesPlugins(initParticlesCb);
131+
130132
const particlesLoaded = useCallback(async container => {
131133
await console.log(container);
132134
}, []);
133135

134136
return (
135-
<Particles
137+
{done && <Particles
136138
id="tsparticles"
137-
init={particlesInit}
138-
loaded={particlesLoaded}
139+
particlesLoaded={particlesLoaded}
139140
options={{
140141
background: {
141142
color: {
@@ -205,7 +206,7 @@ const App = () => {
205206
},
206207
detectRetina: true,
207208
}}
208-
/>
209+
/>}
209210
);
210211
};
211212
```
@@ -220,24 +221,23 @@ import Particles from "@tsparticles/react";
220221
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
221222

222223
const App = () => {
223-
const particlesInit = useCallback(async (engine: Engine) => {
224-
console.log(engine);
225-
226-
// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
224+
const initParticlesCb = useCallback(async (engine: Engine) => {
225+
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
227226
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
228227
// starting from v2 you can add only the features you need reducing the bundle size
229228
//await loadFull(engine);
230229
await loadSlim(engine);
231230
}, []);
232231

232+
const { done, error } = useParticlesPlugins(initParticlesCb);
233+
233234
const particlesLoaded = useCallback(async (container: Container | undefined) => {
234235
await console.log(container);
235236
}, []);
236237
return (
237-
<Particles
238+
{done && <Particles
238239
id="tsparticles"
239-
init={particlesInit}
240-
loaded={particlesLoaded}
240+
particlesLoaded={particlesLoaded}
241241
options={{
242242
background: {
243243
color: {
@@ -307,26 +307,23 @@ const App = () => {
307307
},
308308
detectRetina: true,
309309
}}
310-
/>
310+
/>}
311311
);
312312
};
313313
```
314314

315315
### Props
316316

317-
| Prop | Type | Definition |
318-
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
319-
| id | string | The id of the element. |
320-
| width | string | The width of the canvas. |
321-
| height | string | The height of the canvas. |
322-
| options | object | The options of the particles instance. |
323-
| url | string | The remote options url, called using an AJAX request |
324-
| style | object | The style of the canvas element. |
325-
| className | string | The class name of the canvas wrapper. |
326-
| canvasClassName | string | the class name of the canvas. |
327-
| container | object | The instance of the [particles container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html) |
328-
| init | function | This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here |
329-
| loaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
317+
| Prop | Type | Definition |
318+
| --------------- | ------ | ---------------------------------------------------- |
319+
| id | string | The id of the element. |
320+
| width | string | The width of the canvas. |
321+
| height | string | The height of the canvas. |
322+
| options | object | The options of the particles instance. |
323+
| url | string | The remote options url, called using an AJAX request |
324+
| style | object | The style of the canvas element. |
325+
| className | string | The class name of the canvas wrapper. |
326+
| canvasClassName | string | the class name of the canvas. |
330327

331328
#### particles.json
332329

0 commit comments

Comments
 (0)