@tsparticles/react 4.0.5 → 4.1.1

package/{dist/Particles.js → Particles.js}

@@ -7,15 +7,19 @@ 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;
+		let e, t = !1;
 		return n.load({
 			id: o ?? "tsparticles",
 			url: u,
 			options: s
-		}).then((t) => {
-			e = t, c?.(t);
+		}).then((n) => {
+			if (t) {
+				n?.destroy();
+				return;
+			}
+			e = n, c?.(n);
 		}), () => {
-			e?.destroy();
+			t = !0, e?.destroy();
 		};
 	}, [
 		o,

package/package.json

@@ -1,70 +1,27 @@
 {
   "name": "@tsparticles/react",
-  "version": "4.0.5",
+  "version": "4.1.1",
   "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tsparticles/tsparticles.git",
     "directory": "wrappers/react"
   },
-  "main": "dist/index.js",
-  "types": "dist/lib/index.d.ts",
+  "main": "./index.js",
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/lib/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./lib/index.d.ts",
+      "default": "./index.js"
     }
   },
-  "scripts": {
-    "dev": "vite",
-    "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": "workspace:^",
+    "@tsparticles/engine": "4.1.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "devDependencies": {
-    "@tsparticles/engine": "4.0.5",
-    "@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"
-  },
-  "nx": {
-    "targets": {
-      "build": {
-        "inputs": [
-          "production",
-          "^production",
-          "{projectRoot}/lib/**/*"
-        ]
-      }
-    }
-  },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "4d8b281f8097386714300e39b0004b903f9df87b"
+  }
 }

package/README.md

@@ -1,348 +0,0 @@
-[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
-
-# @tsparticles/react
-
-[![npm](https://img.shields.io/npm/v/@tsparticles/react)](https://www.npmjs.com/package/@tsparticles/react) [![npm](https://img.shields.io/npm/dm/@tsparticles/react)](https://www.npmjs.com/package/@tsparticles/react) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
-
-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>
-
-## Installation
-
-```shell
-npm install @tsparticles/react
-```
-
-or
-
-```shell
-yarn add @tsparticles/react
-```
-
-### TypeScript Installation
-
-```shell
-npm install @tsparticles/react @tsparticles/engine
-```
-
-or
-
-```shell
-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`.
-
-### React 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 install them using `create-react-app` like this:
-
-```shell
-$ create-react-app your_app --template particles
-```
-
-or
-
-```shell
-$ create-react-app your_app --template particles-typescript
-```
-
-## How to use
-
-### Code
-
-`ParticlesProvider` is required and receives one async `init` callback.
-That callback is executed only once for the app lifecycle.
-
-Examples:
-
-#### Options object
-
-##### JavaScript support - object
-
-```jsx
-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 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 { 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 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>
-  );
-};
-```
-
-#### Remote url
-
-##### JavaScript support - url
-
-```jsx
-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 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 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 { 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 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.                               |
-| 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.                     |
-| className | string | The class name of the canvas wrapper.                |
-
-#### particles.json
-
-Find all configuration
-options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
-
-You can find sample configurations [here](https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src) 📖
-
-## Demos
-
-Preset demos can be found [here](https://particles.js.org/samples/presets/index.html)
-
-There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
-
-Report bugs and issues [here](https://github.com/tsparticles/tsparticles/issues)
-
-[tsParticle Website](https://particles.js.org)