From ed7a82838013fd2e1e7f1e3f46c95d36d434c301 Mon Sep 17 00:00:00 2001
From: Matteo Bruni <176620+matteobruni@users.noreply.github.com>
Date: Wed, 13 Dec 2023 13:07:46 +0100
Subject: [PATCH] build: updated readme files
---
README.md | 528 +++++++++++++++++++------------------
components/react/README.md | 528 +++++++++++++++++++------------------
2 files changed, 554 insertions(+), 502 deletions(-)
diff --git a/README.md b/README.md
index 3a74d79..e3634f7 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ Examples:
##### JavaScript support - object
```jsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
@@ -74,217 +74,231 @@ import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSl
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container) => {
+ console.log(container);
+ };
+
+ const options = useMemo(
+ () => ({
+ background: {
+ color: {
+ value: "#0d47a1",
+ },
+ },
+ fpsLimit: 120,
+ interactivity: {
+ events: {
+ onClick: {
+ enable: true,
+ mode: "push",
+ },
+ onHover: {
+ enable: true,
+ mode: "repulse",
+ },
+ resize: true,
+ },
+ modes: {
+ push: {
+ quantity: 4,
+ },
+ repulse: {
+ distance: 200,
+ duration: 0.4,
+ },
+ },
+ },
+ particles: {
+ color: {
+ value: "#ffffff",
+ },
+ links: {
+ color: "#ffffff",
+ distance: 150,
+ enable: true,
+ opacity: 0.5,
+ width: 1,
+ },
+ move: {
+ direction: "none",
+ enable: true,
+ outModes: {
+ default: "bounce",
+ },
+ random: false,
+ speed: 6,
+ straight: false,
+ },
+ number: {
+ density: {
+ enable: true,
+ area: 800,
+ },
+ value: 80,
+ },
+ opacity: {
+ value: 0.5,
+ },
+ shape: {
+ type: "circle",
+ },
+ size: {
+ value: { min: 1, max: 5 },
+ },
+ },
+ detectRetina: true,
+ }),
+ []
+ );
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
##### TypeScript support - object
```tsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
-import type { Container, Engine } from "@tsparticles/engine";
+import type { Container } from "@tsparticles/engine";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container: Container) => {
+ console.log(container);
+ };
+
+ const options = useMemo(
+ () => ({
+ background: {
+ color: {
+ value: "#0d47a1",
+ },
+ },
+ fpsLimit: 120,
+ interactivity: {
+ events: {
+ onClick: {
+ enable: true,
+ mode: "push",
+ },
+ onHover: {
+ enable: true,
+ mode: "repulse",
+ },
+ resize: true,
+ },
+ modes: {
+ push: {
+ quantity: 4,
+ },
+ repulse: {
+ distance: 200,
+ duration: 0.4,
+ },
+ },
+ },
+ particles: {
+ color: {
+ value: "#ffffff",
+ },
+ links: {
+ color: "#ffffff",
+ distance: 150,
+ enable: true,
+ opacity: 0.5,
+ width: 1,
+ },
+ move: {
+ direction: "none",
+ enable: true,
+ outModes: {
+ default: "bounce",
+ },
+ random: false,
+ speed: 6,
+ straight: false,
+ },
+ number: {
+ density: {
+ enable: true,
+ area: 800,
+ },
+ value: 80,
+ },
+ opacity: {
+ value: 0.5,
+ },
+ shape: {
+ type: "circle",
+ },
+ size: {
+ value: { min: 1, max: 5 },
+ },
+ },
+ detectRetina: true,
+ }),
+ []
+ );
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
@@ -293,7 +307,7 @@ const App = () => {
##### JavaScript support - url
```jsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
@@ -301,80 +315,92 @@ import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSl
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container) => {
+ console.log(container);
+ };
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
##### TypeScript support - url
```tsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
-import type { Container, Engine } from "@tsparticles/engine";
+import type { Container } from "@tsparticles/engine";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container: Container) => {
+ console.log(container);
+ };
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
### Props
| Prop | Type | Definition |
-|-----------|--------|------------------------------------------------------|
+| --------- | ------ | ---------------------------------------------------- |
| id | string | The id of the element. |
| width | string | The width of the canvas. |
| height | string | The height of the canvas. |
diff --git a/components/react/README.md b/components/react/README.md
index 3a74d79..e3634f7 100644
--- a/components/react/README.md
+++ b/components/react/README.md
@@ -66,7 +66,7 @@ Examples:
##### JavaScript support - object
```jsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
@@ -74,217 +74,231 @@ import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSl
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container) => {
+ console.log(container);
+ };
+
+ const options = useMemo(
+ () => ({
+ background: {
+ color: {
+ value: "#0d47a1",
+ },
+ },
+ fpsLimit: 120,
+ interactivity: {
+ events: {
+ onClick: {
+ enable: true,
+ mode: "push",
+ },
+ onHover: {
+ enable: true,
+ mode: "repulse",
+ },
+ resize: true,
+ },
+ modes: {
+ push: {
+ quantity: 4,
+ },
+ repulse: {
+ distance: 200,
+ duration: 0.4,
+ },
+ },
+ },
+ particles: {
+ color: {
+ value: "#ffffff",
+ },
+ links: {
+ color: "#ffffff",
+ distance: 150,
+ enable: true,
+ opacity: 0.5,
+ width: 1,
+ },
+ move: {
+ direction: "none",
+ enable: true,
+ outModes: {
+ default: "bounce",
+ },
+ random: false,
+ speed: 6,
+ straight: false,
+ },
+ number: {
+ density: {
+ enable: true,
+ area: 800,
+ },
+ value: 80,
+ },
+ opacity: {
+ value: 0.5,
+ },
+ shape: {
+ type: "circle",
+ },
+ size: {
+ value: { min: 1, max: 5 },
+ },
+ },
+ detectRetina: true,
+ }),
+ []
+ );
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
##### TypeScript support - object
```tsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
-import type { Container, Engine } from "@tsparticles/engine";
+import type { Container } from "@tsparticles/engine";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container: Container) => {
+ console.log(container);
+ };
+
+ const options = useMemo(
+ () => ({
+ background: {
+ color: {
+ value: "#0d47a1",
+ },
+ },
+ fpsLimit: 120,
+ interactivity: {
+ events: {
+ onClick: {
+ enable: true,
+ mode: "push",
+ },
+ onHover: {
+ enable: true,
+ mode: "repulse",
+ },
+ resize: true,
+ },
+ modes: {
+ push: {
+ quantity: 4,
+ },
+ repulse: {
+ distance: 200,
+ duration: 0.4,
+ },
+ },
+ },
+ particles: {
+ color: {
+ value: "#ffffff",
+ },
+ links: {
+ color: "#ffffff",
+ distance: 150,
+ enable: true,
+ opacity: 0.5,
+ width: 1,
+ },
+ move: {
+ direction: "none",
+ enable: true,
+ outModes: {
+ default: "bounce",
+ },
+ random: false,
+ speed: 6,
+ straight: false,
+ },
+ number: {
+ density: {
+ enable: true,
+ area: 800,
+ },
+ value: 80,
+ },
+ opacity: {
+ value: 0.5,
+ },
+ shape: {
+ type: "circle",
+ },
+ size: {
+ value: { min: 1, max: 5 },
+ },
+ },
+ detectRetina: true,
+ }),
+ []
+ );
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
@@ -293,7 +307,7 @@ const App = () => {
##### JavaScript support - url
```jsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
@@ -301,80 +315,92 @@ import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSl
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container) => {
+ console.log(container);
+ };
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
##### TypeScript support - url
```tsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
-import type { Container, Engine } from "@tsparticles/engine";
+import type { Container } from "@tsparticles/engine";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
- const [ init, setInit ] = useState(false);
-
- // this should be run only once per application lifetime
- useEffect(() => {
- initParticlesEngine(async (engine) => {
- // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadAll(engine);
- //await loadFull(engine);
- await loadSlim(engine);
- //await loadBasic(engine);
- }).then(() => {
- setInit(true);
- });
- }, []);
-
- const particlesLoaded = (container) => {
- console.log(container);
- };
-
+ const [init, setInit] = useState(false);
+
+ // this should be run only once per application lifetime
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadAll(engine);
+ //await loadFull(engine);
+ await loadSlim(engine);
+ //await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = (container: Container) => {
+ console.log(container);
+ };
+
+ if (init) {
return (
- { init &&
-}
-)
- ;
+
+ );
+ }
+
+ return <>;
};
```
### Props
| Prop | Type | Definition |
-|-----------|--------|------------------------------------------------------|
+| --------- | ------ | ---------------------------------------------------- |
| id | string | The id of the element. |
| width | string | The width of the canvas. |
| height | string | The height of the canvas. |