# react-tsparticles > Official tsParticles React Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, Vue.js (2.x and 3.x), An Latest version **2.12.2** (published 2023-08-11) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install react-tsparticles pnpm add react-tsparticles yarn add react-tsparticles bun add react-tsparticles ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 2.12.2 | | Published | 2023-08-11 | | First published | 2020-05-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 346 KB | | Known vulnerabilities | 0 | | Install scripts | yes | | GitHub stars | 583 | | Author | Matteo Bruni | | Maintainers | ar3s, matteobruni | | Keywords | front-end, frontend, tsparticles, particles.js, particlesjs, particles, particle, canvas, jsparticles, xparticles, particles-js, particles-bg, particles-bg-vue, particles-ts, particles.ts, react-particles-js, react-particles.js, react-particles, react, reactjs, vue-particles, ngx-particles, angular-particles, particleground, vue, vuejs, preact, preactjs, jquery, angularjs, angular, typescript, javascript, animation, web, html5, web-design, webdesign, css, html, css3, animated, background, confetti, canvas, fireworks, fireworks-js, confetti-js, confettijs, fireworksjs, canvas-confetti | ## Links - npm: https://www.npmjs.com/package/react-tsparticles - Repository: https://github.com/tsparticles/react - Homepage: https://github.com/tsparticles/react#readme - Issues: https://github.com/tsparticles/react/issues - Funding: https://github.com/sponsors/matteobruni - npm.io page: https://npm.io/package/react-tsparticles ## Dependencies (1) - [tsparticles-engine](https://npm.io/package/tsparticles-engine.md) ^2.12.0 ## Alternatives - [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads ## Recent versions - 2.12.2 (latest) — 2023-08-11 - 2.0.4 (next) — 2022-04-06 - 2.0.0-beta.5 (beta) — 2022-01-30 - 2.0.0-alpha.7 (alpha) — 2021-04-11 - 2.12.1 — 2023-08-04 - 2.12.0 — 2023-08-04 - 2.11.0 — 2023-07-14 - 2.10.1 — 2023-06-04 - 2.9.3 — 2023-02-12 - 2.9.2 — 2023-02-12 - 2.9.1 — 2023-02-11 - 2.9.0 — 2023-02-10 - 2.8.0 — 2023-01-18 - 2.7.1 — 2022-12-25 - 2.7.0 — 2022-12-23 - … 209 more at https://npm.io/package/react-tsparticles/versions ## README [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) # react-tsparticles [![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) Official [tsParticles](https://github.com/matteobruni/tsparticles) ReactJS component [![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") ## Installation ```shell npm install react-tsparticles ``` or ```shell yarn add react-tsparticles ``` ### create-react-app Starting from version 1.17.0 there are two official `create-react-app` 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: ```shell $ create-react-app your_app --template particles ``` or ```shell $ create-react-app your_app --template particles-typescript ``` ## How to use ### Code Examples: #### Remote url ##### JavaScript support - url ```jsx import { useCallback } from "react"; import Particles from "react-tsparticles"; //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. const App = () => { const particlesInit = useCallback(async engine => { console.log(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 loadFull(engine); await loadSlim(engine); }, []); const particlesLoaded = useCallback(async container => { await console.log(container); }, []); return ( ); }; ``` ##### TypeScript support - url ```typescript jsx import { useCallback } from "react"; import Particles from "react-tsparticles"; import type { Container, Engine } from "tsparticles-engine"; //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. const App = () => { const particlesInit = useCallback(async (engine: Engine) => { console.log(engine); // you can initialize 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 loadFull(engine); await loadSlim(engine); }, []); const particlesLoaded = useCallback(async (container: Container | undefined) => { await console.log(container); }, []); return ( ); }; ``` #### Options object ##### JavaScript support - object ```jsx import { useCallback } from "react"; import Particles from "react-tsparticles"; //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. const App = () => { const particlesInit = useCallback(async engine => { console.log(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 loadFull(engine); await loadSlim(engine); }, []); const particlesLoaded = useCallback(async container => { await console.log(container); }, []); return ( ); }; ``` ##### TypeScript support - object ```typescript jsx import { useCallback } from "react"; import type { Container, Engine } from "tsparticles-engine"; import Particles from "react-tsparticles"; //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. const App = () => { const particlesInit = useCallback(async (engine: Engine) => { console.log(engine); // you can initialize 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 loadFull(engine); await loadSlim(engine); }, []); const particlesLoaded = useCallback(async (container: Container | undefined) => { await console.log(container); }, []); 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. | | 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. | | canvasClassName | string | the class name of the canvas. | | container | object | The instance of the [particles container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html) | | 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 | | 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 | #### 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/matteobruni/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/matteobruni/tsparticles/issues) [tsParticle Website](https://particles.js.org) --- _Source: https://npm.io/package/react-tsparticles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._