{"id":13456341,"url":"https://github.com/tsparticles/react","last_synced_at":"2025-05-15T19:01:46.632Z","repository":{"id":65257021,"uuid":"564549149","full_name":"tsparticles/react","owner":"tsparticles","description":"React tsParticles official component","archived":false,"fork":false,"pushed_at":"2025-05-14T06:36:20.000Z","size":1769,"stargazers_count":509,"open_issues_count":15,"forks_count":38,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-14T07:44:54.796Z","etag":null,"topics":["2d","animations","canvas","confetti","fireworks","hacktoberfest","javascript","js","npm","particles","particles-js","react","reactjs","ts","tsparticles","typescript","web"],"latest_commit_sha":null,"homepage":"https://particles.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsparticles.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"matteobruni,tsparticles"}},"created_at":"2022-11-11T00:27:50.000Z","updated_at":"2025-05-13T18:09:59.000Z","dependencies_parsed_at":"2023-10-16T20:40:05.758Z","dependency_job_id":"bb712a84-69f0-4c24-b6a9-da2bd6ebce4c","html_url":"https://github.com/tsparticles/react","commit_stats":{"total_commits":121,"total_committers":5,"mean_commits":24.2,"dds":0.3305785123966942,"last_synced_commit":"bfe53ffc514c8e8a9a0419908d0ccadb42072f25"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Freact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Freact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Freact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Freact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsparticles","download_url":"https://codeload.github.com/tsparticles/react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254404337,"owners_count":22065639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d","animations","canvas","confetti","fireworks","hacktoberfest","javascript","js","npm","particles","particles-js","react","reactjs","ts","tsparticles","typescript","web"],"created_at":"2024-07-31T08:01:20.201Z","updated_at":"2025-05-15T19:01:46.574Z","avatar_url":"https://github.com/tsparticles.png","language":"JavaScript","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# @tsparticles/react\n\n[![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)\n\nOfficial [tsParticles](https://github.com/tsparticles/tsparticles) ReactJS component\n\n[![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)\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113\u0026theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-tsparticles\") \u003ca href=\"https://www.buymeacoffee.com/matteobruni\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a beer\u0026emoji=🍺\u0026slug=matteobruni\u0026button_colour=5F7FFF\u0026font_colour=ffffff\u0026font_family=Arial\u0026outline_colour=000000\u0026coffee_colour=FFDD00\"\u003e\u003c/a\u003e\n\n## Installation\n\n```shell\nnpm install @tsparticles/react\n```\n\nor\n\n```shell\nyarn add @tsparticles/react\n```\n\n### TypeScript Installation\n\n```shell\nnpm install @tsparticles/react @tsparticles/engine\n```\n\nor\n\n```shell\nyarn add @tsparticles/react @tsparticles/engine\n```\n\n[@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`.\n\n### create-react-app\n\nStarting from version 1.17.0 there are two official `create-react-app` templates:\n\n- `cra-template-particles`: Simple ReactJS template with full screen particles, using JavaScript\n- `cra-template-particles-typescript`: Simple ReactJS template with full screen particles, using TypeScript\n\nYou can simply install them using the `create-react-app` command like this:\n\n```shell\n$ create-react-app your_app --template particles\n```\n\nor\n\n```shell\n$ create-react-app your_app --template particles-typescript\n```\n\n## How to use\n\n### Code\n\nExamples:\n\n#### Options object\n\n##### JavaScript support - object\n\n```jsx\nimport { useEffect, useMemo, useState } from \"react\";\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\n// import { loadAll } from \"@tsparticles/all\"; // if you are going to use `loadAll`, install the \"@tsparticles/all\" package too.\n// import { loadFull } from \"tsparticles\"; // if you are going to use `loadFull`, install the \"tsparticles\" package too.\nimport { loadSlim } from \"@tsparticles/slim\"; // if you are going to use `loadSlim`, install the \"@tsparticles/slim\" package too.\n// import { loadBasic } from \"@tsparticles/basic\"; // if you are going to use `loadBasic`, install the \"@tsparticles/basic\" package too.\n\nconst App = () =\u003e {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() =\u003e {\n    initParticlesEngine(async (engine) =\u003e {\n      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets\n      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready\n      // starting from v2 you can add only the features you need reducing the bundle size\n      //await loadAll(engine);\n      //await loadFull(engine);\n      await loadSlim(engine);\n      //await loadBasic(engine);\n    }).then(() =\u003e {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = (container) =\u003e {\n    console.log(container);\n  };\n\n  const options = useMemo(\n    () =\u003e ({\n      background: {\n        color: {\n          value: \"#0d47a1\",\n        },\n      },\n      fpsLimit: 120,\n      interactivity: {\n        events: {\n          onClick: {\n            enable: true,\n            mode: \"push\",\n          },\n          onHover: {\n            enable: true,\n            mode: \"repulse\",\n          },\n        },\n        modes: {\n          push: {\n            quantity: 4,\n          },\n          repulse: {\n            distance: 200,\n            duration: 0.4,\n          },\n        },\n      },\n      particles: {\n        color: {\n          value: \"#ffffff\",\n        },\n        links: {\n          color: \"#ffffff\",\n          distance: 150,\n          enable: true,\n          opacity: 0.5,\n          width: 1,\n        },\n        move: {\n          direction: \"none\",\n          enable: true,\n          outModes: {\n            default: \"bounce\",\n          },\n          random: false,\n          speed: 6,\n          straight: false,\n        },\n        number: {\n          density: {\n            enable: true,\n          },\n          value: 80,\n        },\n        opacity: {\n          value: 0.5,\n        },\n        shape: {\n          type: \"circle\",\n        },\n        size: {\n          value: { min: 1, max: 5 },\n        },\n      },\n      detectRetina: true,\n    }),\n    [],\n  );\n\n  if (init) {\n    return (\n      \u003cParticles\n        id=\"tsparticles\"\n        particlesLoaded={particlesLoaded}\n        options={options}\n      /\u003e\n    );\n  }\n\n  return \u003c\u003e\u003c/\u003e;\n};\n```\n\n##### TypeScript support - object\n\n```tsx\nimport { useEffect, useMemo, useState } from \"react\";\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\nimport {\n  type Container,\n  type ISourceOptions,\n  MoveDirection,\n  OutMode,\n} from \"@tsparticles/engine\";\n// import { loadAll } from \"@tsparticles/all\"; // if you are going to use `loadAll`, install the \"@tsparticles/all\" package too.\n// import { loadFull } from \"tsparticles\"; // if you are going to use `loadFull`, install the \"tsparticles\" package too.\nimport { loadSlim } from \"@tsparticles/slim\"; // if you are going to use `loadSlim`, install the \"@tsparticles/slim\" package too.\n// import { loadBasic } from \"@tsparticles/basic\"; // if you are going to use `loadBasic`, install the \"@tsparticles/basic\" package too.\n\nconst App = () =\u003e {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() =\u003e {\n    initParticlesEngine(async (engine) =\u003e {\n      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets\n      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready\n      // starting from v2 you can add only the features you need reducing the bundle size\n      //await loadAll(engine);\n      //await loadFull(engine);\n      await loadSlim(engine);\n      //await loadBasic(engine);\n    }).then(() =\u003e {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = async (container?: Container): Promise\u003cvoid\u003e =\u003e {\n    console.log(container);\n  };\n\n  const options: ISourceOptions = useMemo(\n    () =\u003e ({\n      background: {\n        color: {\n          value: \"#0d47a1\",\n        },\n      },\n      fpsLimit: 120,\n      interactivity: {\n        events: {\n          onClick: {\n            enable: true,\n            mode: \"push\",\n          },\n          onHover: {\n            enable: true,\n            mode: \"repulse\",\n          },\n        },\n        modes: {\n          push: {\n            quantity: 4,\n          },\n          repulse: {\n            distance: 200,\n            duration: 0.4,\n          },\n        },\n      },\n      particles: {\n        color: {\n          value: \"#ffffff\",\n        },\n        links: {\n          color: \"#ffffff\",\n          distance: 150,\n          enable: true,\n          opacity: 0.5,\n          width: 1,\n        },\n        move: {\n          direction: MoveDirection.none,\n          enable: true,\n          outModes: {\n            default: OutMode.out,\n          },\n          random: false,\n          speed: 6,\n          straight: false,\n        },\n        number: {\n          density: {\n            enable: true,\n          },\n          value: 80,\n        },\n        opacity: {\n          value: 0.5,\n        },\n        shape: {\n          type: \"circle\",\n        },\n        size: {\n          value: { min: 1, max: 5 },\n        },\n      },\n      detectRetina: true,\n    }),\n    [],\n  );\n\n  if (init) {\n    return (\n      \u003cParticles\n        id=\"tsparticles\"\n        particlesLoaded={particlesLoaded}\n        options={options}\n      /\u003e\n    );\n  }\n\n  return \u003c\u003e\u003c/\u003e;\n};\n```\n\n#### Remote url\n\n##### JavaScript support - url\n\n```jsx\nimport { useEffect, useState } from \"react\";\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\n// import { loadAll } from \"@tsparticles/all\"; // if you are going to use `loadAll`, install the \"@tsparticles/all\" package too.\n// import { loadFull } from \"tsparticles\"; // if you are going to use `loadFull`, install the \"tsparticles\" package too.\nimport { loadSlim } from \"@tsparticles/slim\"; // if you are going to use `loadSlim`, install the \"@tsparticles/slim\" package too.\n// import { loadBasic } from \"@tsparticles/basic\"; // if you are going to use `loadBasic`, install the \"@tsparticles/basic\" package too.\n\nconst App = () =\u003e {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() =\u003e {\n    initParticlesEngine(async (engine) =\u003e {\n      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets\n      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready\n      // starting from v2 you can add only the features you need reducing the bundle size\n      //await loadAll(engine);\n      //await loadFull(engine);\n      await loadSlim(engine);\n      //await loadBasic(engine);\n    }).then(() =\u003e {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = (container) =\u003e {\n    console.log(container);\n  };\n\n  if (init) {\n    return (\n      \u003cParticles\n        id=\"tsparticles\"\n        url=\"http://foo.bar/particles.json\"\n        particlesLoaded={particlesLoaded}\n      /\u003e\n    );\n  }\n\n  return \u003c\u003e\u003c/\u003e;\n};\n```\n\n##### TypeScript support - url\n\n```tsx\nimport { useEffect, useState } from \"react\";\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\nimport type { Container } from \"@tsparticles/engine\";\n// import { loadAll } from \"@tsparticles/all\"; // if you are going to use `loadAll`, install the \"@tsparticles/all\" package too.\n// import { loadFull } from \"tsparticles\"; // if you are going to use `loadFull`, install the \"tsparticles\" package too.\nimport { loadSlim } from \"@tsparticles/slim\"; // if you are going to use `loadSlim`, install the \"@tsparticles/slim\" package too.\n// import { loadBasic } from \"@tsparticles/basic\"; // if you are going to use `loadBasic`, install the \"@tsparticles/basic\" package too.\n\nconst App = () =\u003e {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() =\u003e {\n    initParticlesEngine(async (engine) =\u003e {\n      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets\n      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready\n      // starting from v2 you can add only the features you need reducing the bundle size\n      //await loadAll(engine);\n      //await loadFull(engine);\n      await loadSlim(engine);\n      //await loadBasic(engine);\n    }).then(() =\u003e {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = async (container?: Container) =\u003e {\n    console.log(container);\n  };\n\n  if (init) {\n    return (\n      \u003cParticles\n        id=\"tsparticles\"\n        url=\"http://foo.bar/particles.json\"\n        particlesLoaded={particlesLoaded}\n      /\u003e\n    );\n  }\n\n  return \u003c\u003e\u003c/\u003e;\n};\n```\n\n### Props\n\n| Prop      | Type   | Definition                                           |\n| --------- | ------ | ---------------------------------------------------- |\n| id        | string | The id of the element.                               |\n| width     | string | The width of the canvas.                             |\n| height    | string | The height of the canvas.                            |\n| options   | object | The options of the particles instance.               |\n| url       | string | The remote options url, called using an AJAX request |\n| style     | object | The style of the canvas element.                     |\n| className | string | The class name of the canvas wrapper.                |\n\n#### particles.json\n\nFind all configuration\noptions [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).\n\nYou can find sample configurations [here](https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src) 📖\n\n## Demos\n\nPreset demos can be found [here](https://particles.js.org/samples/presets/index.html)\n\nThere's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)\n\nReport bugs and issues [here](https://github.com/tsparticles/tsparticles/issues)\n\n[tsParticle Website](https://particles.js.org)\n","funding_links":["https://github.com/sponsors/matteobruni,tsparticles","https://github.com/sponsors/matteobruni","https://www.buymeacoffee.com/matteobruni","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsparticles%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsparticles%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsparticles%2Freact/lists"}