@tsparticles/react 3.0.0 → 4.0.0-beta.16

package/README.md

@@ -6,6 +6,8 @@
 
 Official [tsParticles](https://github.com/tsparticles/tsparticles) ReactJS component
 
+If you are using Next.js, prefer [@tsparticles/nextjs](https://www.npmjs.com/package/@tsparticles/nextjs) for a Next-first integration layer.
+
 [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
 
 [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
@@ -36,14 +38,14 @@ yarn add @tsparticles/react @tsparticles/engine
 
 [@tsparticles/engine](https://npmjs.com/package/@tsparticles/engine) is the core package for [tsParticles](https://particles.js.org), it contains useful types like `ISourceOptions`, `Engine` or `Container`.
 
-### create-react-app
+### React templates
 
-Starting from version 1.17.0 there are two official `create-react-app` templates:
+Starting from version 1.17.0 there are two official React templates:
 
 - `cra-template-particles`: Simple ReactJS template with full screen particles, using JavaScript
 - `cra-template-particles-typescript`: Simple ReactJS template with full screen particles, using TypeScript
 
-You can simply install them using the `create-react-app` command like this:
+You can install them using `create-react-app` like this:
 
 ```shell
 $ create-react-app your_app --template particles
@@ -59,6 +61,9 @@ $ create-react-app your_app --template particles-typescript
 
 ### Code
 
+`ParticlesProvider` is required and receives one async `init` callback.
+That callback is executed only once for the app lifecycle.
+
 Examples:
 
 #### Options object
@@ -66,225 +71,197 @@ Examples:
 ##### JavaScript support - object
 
 ```jsx
-import { useCallback, 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 { useMemo } from "react";
+import Particles, { ParticlesProvider } 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.
 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 particlesInit = async engine => {
+  await loadSlim(engine);
+};
+
 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);
-    };
-
-    return (
-        { init && <Particles
-            id="tsparticles"
-            particlesLoaded={particlesLoaded}
-            options={{
-                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,
-            }}
-        />
-}
-)
-    ;
+  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",
+          },
+        },
+        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,
+          },
+          value: 80,
+        },
+        opacity: {
+          value: 0.5,
+        },
+        shape: {
+          type: "circle",
+        },
+        size: {
+          value: { min: 1, max: 5 },
+        },
+      },
+      detectRetina: true,
+    }),
+    [],
+  );
+
+  return (
+    <ParticlesProvider init={particlesInit}>
+      <Particles id="tsparticles" particlesLoaded={particlesLoaded} options={options} />
+    </ParticlesProvider>
+  );
 };
 ```
 
 ##### TypeScript support - object
 
 ```tsx
-import { useCallback, useEffect, useState } from "react";
-import Particles, { initParticlesEngine } from "@tsparticles/react";
-import type { Container, Engine } from "@tsparticles/engine";
-// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
+import { useMemo } from "react";
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { type Container, type Engine, type ISourceOptions, MoveDirection, OutMode } 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 particlesInit = async (engine: Engine): Promise<void> => {
+  await loadSlim(engine);
+};
+
 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);
-    };
-
-    return (
-        { init && <Particles
-            id="tsparticles"
-            particlesLoaded={particlesLoaded}
-            options={{
-                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,
-            }}
-        />
-}
-)
-    ;
+  const particlesLoaded = async (container?: Container): Promise<void> => {
+    console.log(container);
+  };
+
+  const options: ISourceOptions = useMemo(
+    () => ({
+      background: {
+        color: {
+          value: "#0d47a1",
+        },
+      },
+      fpsLimit: 120,
+      interactivity: {
+        events: {
+          onClick: {
+            enable: true,
+            mode: "push",
+          },
+          onHover: {
+            enable: true,
+            mode: "repulse",
+          },
+        },
+        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: MoveDirection.none,
+          enable: true,
+          outModes: {
+            default: OutMode.out,
+          },
+          random: false,
+          speed: 6,
+          straight: false,
+        },
+        number: {
+          density: {
+            enable: true,
+          },
+          value: 80,
+        },
+        opacity: {
+          value: 0.5,
+        },
+        shape: {
+          type: "circle",
+        },
+        size: {
+          value: { min: 1, max: 5 },
+        },
+      },
+      detectRetina: true,
+    }),
+    [],
+  );
+
+  return (
+    <ParticlesProvider init={particlesInit}>
+      <Particles id="tsparticles" particlesLoaded={particlesLoaded} options={options} />
+    </ParticlesProvider>
+  );
 };
 ```
 
@@ -293,91 +270,61 @@ const App = () => {
 ##### JavaScript support - url
 
 ```jsx
-import { useCallback, 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 Particles, { ParticlesProvider } 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.
 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 particlesInit = async engine => {
+  await loadSlim(engine);
+};
+
 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);
-    };
-
-    return (
-        { init && <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={particlesLoaded}/>
-}
-)
-    ;
+  const particlesLoaded = container => {
+    console.log(container);
+  };
+
+  return (
+    <ParticlesProvider init={particlesInit}>
+      <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={particlesLoaded} />
+    </ParticlesProvider>
+  );
 };
 ```
 
 ##### TypeScript support - url
 
 ```tsx
-import { useCallback, useEffect, useState } from "react";
-import Particles, { initParticlesEngine } from "@tsparticles/react";
+import Particles, { ParticlesProvider } from "@tsparticles/react";
 import type { Container, Engine } from "@tsparticles/engine";
-// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
+// 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 particlesInit = async (engine: Engine): Promise<void> => {
+  await loadSlim(engine);
+};
+
 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);
-    };
-
-    return (
-        { init && <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={particlesLoaded}/>
-}
-)
-    ;
+  const particlesLoaded = (container?: Container) => {
+    console.log(container);
+  };
+
+  return (
+    <ParticlesProvider init={particlesInit}>
+      <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={particlesLoaded} />
+    </ParticlesProvider>
+  );
 };
 ```
 
 ### 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.                            |
 | options   | object | The options of the particles instance.               |
 | url       | string | The remote options url, called using an AJAX request |
 | style     | object | The style of the canvas element.                     |

package/dist/IParticlesProps.js

@@ -1 +0,0 @@
-

package/dist/Particles.js

@@ -1,18 +1,33 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useEffect as m } from "react";
-import { tsParticles as s } from "@tsparticles/engine";
-const f = (t) => {
-  const i = t.id ?? "tsparticles";
-  return m(() => {
-    let e;
-    return s.load({ id: i, url: t.url, options: t.options }).then((l) => {
-      var a;
-      e = l, (a = t.particlesLoaded) == null || a.call(t, l);
-    }), () => {
-      e == null || e.destroy();
-    };
-  }, [i, t, t.url, t.options]), /* @__PURE__ */ d("div", { id: i, className: t.className });
-};
-export {
-  f as default
+import { useParticlesProvider as e } from "./ParticlesProvider.js";
+import { useEffect as t } from "react";
+import { tsParticles as n } from "@tsparticles/engine";
+import { jsx as r } from "react/jsx-runtime";
+//#region lib/Particles.tsx
+var i = (i) => {
+	let { className: a, id: o, options: s, particlesLoaded: c, style: l, url: u } = i, { loaded: d } = e();
+	return t(() => {
+		if (!d) return;
+		let e;
+		return n.load({
+			id: o ?? "tsparticles",
+			url: u,
+			options: s
+		}).then((t) => {
+			e = t, c?.(t);
+		}), () => {
+			e?.destroy();
+		};
+	}, [
+		o,
+		d,
+		s,
+		c,
+		u
+	]), /* @__PURE__ */ r("div", {
+		id: o ?? "tsparticles",
+		className: a,
+		style: l
+	});
 };
+//#endregion
+export { i as default };

package/dist/ParticlesProvider.js

@@ -0,0 +1,35 @@
+import { createContext as e, useContext as t, useEffect as n, useMemo as r, useState as i } from "react";
+import { tsParticles as a } from "@tsparticles/engine";
+import { jsx as o } from "react/jsx-runtime";
+//#region lib/ParticlesProvider.tsx
+var s = !1, c, l, u = e({ loaded: !1 }), d = ({ children: e, init: t }) => {
+	let [d, f] = i(s);
+	n(() => {
+		let e = !1;
+		if (!s) {
+			if (!c) l = t, c = (async () => {
+				await t(a), s = !0;
+			})().catch((e) => {
+				throw c = void 0, l = void 0, e;
+			});
+			else if (l && l !== t) throw Error("ParticlesProvider init callback must be stable across the app lifecycle.");
+			return c.then(() => {
+				e || f(!0);
+			}).catch(() => {
+				e || f(!1);
+			}), () => {
+				e = !0;
+			};
+		}
+	}, [t]);
+	let p = r(() => ({ loaded: d }), [d]);
+	return /* @__PURE__ */ o(u.Provider, {
+		value: p,
+		children: d ? e : null
+	});
+};
+function f() {
+	return t(u);
+}
+//#endregion
+export { d as ParticlesProvider, f as useParticlesProvider };

package/dist/index.js

@@ -1,12 +1,6 @@
-import { tsParticles as i } from "@tsparticles/engine";
-import o from "./Particles.js";
-import "react/jsx-runtime";
-import "react";
-async function n(t) {
-  await t(i);
-}
-export {
-  o as Particles,
-  o as default,
-  n as initParticlesEngine
-};
+import { ParticlesProvider as e, useParticlesProvider as t } from "./ParticlesProvider.js";
+import n from "./Particles.js";
+//#region lib/index.ts
+var r = n;
+//#endregion
+export { n as Particles, e as ParticlesProvider, r as default, t as useParticlesProvider };

package/dist/lib/IParticlesProps.d.ts

@@ -0,0 +1,10 @@
+import { Container, ISourceOptions } from '@tsparticles/engine';
+import { CSSProperties } from 'react';
+export interface IParticlesProps {
+    id?: string;
+    options?: ISourceOptions;
+    url?: string;
+    style?: CSSProperties;
+    className?: string;
+    particlesLoaded?: (container?: Container) => Promise<void> | void;
+}

package/dist/lib/Particles.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IParticlesProps } from './IParticlesProps';
+declare const Particles: FC<IParticlesProps>;
+export default Particles;

package/dist/lib/ParticlesProvider.d.ts

@@ -0,0 +1,12 @@
+import { Engine } from '@tsparticles/engine';
+import { FC, PropsWithChildren } from 'react';
+export type ParticlesPluginRegistrar = (engine: Engine) => Promise<void>;
+export interface IParticlesProviderProps extends PropsWithChildren {
+    init: ParticlesPluginRegistrar;
+}
+interface IParticlesProviderContext {
+    loaded: boolean;
+}
+export declare const ParticlesProvider: FC<IParticlesProviderProps>;
+export declare function useParticlesProvider(): IParticlesProviderContext;
+export {};

package/dist/lib/index.d.ts

@@ -0,0 +1,5 @@
+import { default as Particles } from './Particles.js';
+export type { IParticlesProps } from './IParticlesProps.js';
+export default Particles;
+export { Particles };
+export { type IParticlesProviderProps, type ParticlesPluginRegistrar, ParticlesProvider, useParticlesProvider, } from './ParticlesProvider.js';

package/package.json

@@ -1,45 +1,59 @@
 {
   "name": "@tsparticles/react",
-  "version": "3.0.0",
+  "version": "4.0.0-beta.16",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "wrappers/react"
+  },
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "build:ci": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "prettier --write README.md && pnpm run prettify && tsc && vite build",
+    "build:ci": "prettier --check README.md && pnpm run prettify:ci && tsc && vite build",
+    "lint": "eslint . --max-warnings 0",
     "preview": "vite preview",
+    "prettify": "prettier --write \"src/**/*.{ts,tsx}\" && prettier --write \"lib/**/*.{ts,tsx}\"",
+    "prettify:ci": "prettier --check \"src/**/*.{ts,tsx}\" && prettier --check \"lib/**/*.{ts,tsx}\"",
     "prepublishOnly": "pnpm run build"
   },
   "files": [
     "dist"
   ],
+  "license": "MIT",
   "peerDependencies": {
-    "@tsparticles/engine": "^3.0.2",
+    "@tsparticles/engine": "workspace:^",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@tsparticles/engine": "^3.0.2",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "glob": "^10.3.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.6",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-lib-inject-css": "^1.3.0"
+    "@tsparticles/engine": "4.0.0-beta.16",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.58.1",
+    "@typescript-eslint/parser": "^8.58.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "glob": "^13.0.6",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "06ad7ff6a21833bb7c62c443b2cfb6bbcba58273"
+  "gitHead": "8ac678c4da53ea2b6a9a33aaa40f5141e2a7d513"
 }

package/dist/IParticlesProps.d.ts

@@ -1,10 +0,0 @@
-import type { Container, ISourceOptions } from "@tsparticles/engine";
-import type { CSSProperties } from "react";
-export interface IParticlesProps {
-    id?: string;
-    options?: ISourceOptions;
-    url?: string;
-    style?: CSSProperties;
-    className?: string;
-    particlesLoaded?: (container?: Container) => Promise<void>;
-}

package/dist/Particles.d.ts

@@ -1,4 +0,0 @@
-import { FC } from "react";
-import type { IParticlesProps } from "./IParticlesProps";
-declare const Particles: FC<IParticlesProps>;
-export default Particles;

package/dist/index.d.ts

@@ -1,6 +0,0 @@
-import { Engine } from "@tsparticles/engine";
-import Particles from "./Particles";
-export type { IParticlesProps, } from "./IParticlesProps";
-export declare function initParticlesEngine(cb: (engine: Engine) => Promise<void>): Promise<void>;
-export default Particles;
-export { Particles };