[
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: matteobruni,tsparticles\n"
  },
  {
    "path": ".github/workflows/nodejs.yml",
    "content": "name: Node.js CI\non:\n  push:\n    branches:\n      - main\n      - legacy\n  pull_request:\n    branches:\n      - main\n      - legacy\n\n#env:\n  #NX_CLOUD_DISTRIBUTED_EXECUTION: true\n  #NX_CLOUD_ACCESS_TOKEN: '${{ secrets.NX_CLOUD_ACCESS_TOKEN }}'\n  #NX_BRANCH: '${{github.event.pull_request.number || github.ref_name}}'\n\njobs:\n\n  main:\n    runs-on: ubuntu-latest\n    if: ${{ github.event_name != 'pull_request' }}\n    steps:\n      - uses: actions/checkout@v4\n        name: Checkout [main]\n        with:\n          fetch-depth: 0\n      #- name: Derive appropriate SHAs for base and head for `nx affected` commands\n      #  uses: nrwl/nx-set-shas@v3\n      - uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n      - uses: pnpm/action-setup@v3.0.0\n        name: Install pnpm\n        id: pnpm-install\n        with:\n          version: 8\n          run_install: false\n      - name: Get pnpm version\n        id: pnpm-version\n        run: |\n          echo \"$(pnpm --version)\"\n\n      - name: Get pnpm store directory\n        id: pnpm-cache\n        run: |\n          echo \"::set-output name=pnpm_cache_dir::$(pnpm store path)\"\n\n      - uses: actions/cache@v4\n        name: Setup pnpm cache\n        with:\n          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n          restore-keys: |\n            ${{ runner.os }}-pnpm-store-\n      - run: pnpm install --no-frozen-lockfile\n      #- run: npx nx-cloud start-ci-run\n      #- run: pnpm run prettify:ci:readme\n      - run: pnpm run build:ci #--concurrency 3\n      #- run: npx nx-cloud stop-all-agents\n  pr:\n    runs-on: ubuntu-latest\n    if: ${{ github.event_name == 'pull_request' }}\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          ref: ${{ github.event.pull_request.head.ref }}\n          repository: ${{ github.event.pull_request.head.repo.full_name }}\n          fetch-depth: 0\n      #- name: Derive appropriate SHAs for base and head for `nx affected` commands\n      #  uses: nrwl/nx-set-shas@v3\n      - uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n      - uses: pnpm/action-setup@v3.0.0\n        name: Install pnpm\n        id: pnpm-install\n        with:\n          version: 8\n          run_install: false\n      - name: Get pnpm version\n        id: pnpm-version\n        run: |\n          echo \"$(pnpm --version)\"\n\n      - name: Get pnpm store directory\n        id: pnpm-cache\n        run: |\n          echo \"::set-output name=pnpm_cache_dir::$(pnpm store path)\"\n\n      - uses: actions/cache@v4\n        name: Setup pnpm cache\n        with:\n          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n          restore-keys: |\n            ${{ runner.os }}-pnpm-store-\n      - run: pnpm install --no-frozen-lockfile\n      #- run: npx nx-cloud start-ci-run\n      #- run: pnpm run prettify:ci:readme\n      - run: pnpm run build:ci #--concurrency 3\n      #- run: npx nx-cloud stop-all-agents\n      - run: echo ${{ github.repository_owner }}\n      - run: echo ${{ github.actor }}\n\n#  agents:\n#    runs-on: ubuntu-latest\n#    name: Nx Agent\n#    timeout-minutes: 60\n#    strategy:\n#      matrix:\n#        agent: [ 1, 2, 3 ]\n#    steps:\n#      - uses: actions/checkout@v3\n#      - uses: actions/setup-node@v3\n#        with:\n#          node-version: '20'\n#      - uses: pnpm/action-setup@v2.2.2\n#        name: Install pnpm\n#        id: pnpm-install\n#        with:\n#          version: 8\n#          run_install: false\n#      - name: Get pnpm version\n#        id: pnpm-version\n#        run: |\n#          echo \"$(pnpm --version)\"\n#\n#      - name: Get pnpm store directory\n#        id: pnpm-cache\n#        run: |\n#          echo \"::set-output name=pnpm_cache_dir::$(pnpm store path)\"\n#\n#      - uses: actions/cache@v3\n#        name: Setup pnpm cache\n#        with:\n#          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n#          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n#          restore-keys: |\n#            ${{ runner.os }}-pnpm-store-\n#      - run: pnpm install --no-frozen-lockfile\n#      - name: Start Nx Agent ${{ matrix.agent }}\n#        run: npx nx-cloud start-agent\n"
  },
  {
    "path": ".gitignore",
    "content": "## Ignore Visual Studio temporary files, build results, and\n## files generated by popular Visual Studio add-ons.\n##\n## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore\n\n# User-specific files\n*.rsuser\n*.suo\n*.user\n*.userosscache\n*.sln.docstates\n\n# User-specific files (MonoDevelop/Xamarin Studio)\n*.userprefs\n\n# Mono auto generated files\nmono_crash.*\n\n# Build results\n[Dd]ebug/\n[Dd]ebugPublic/\n[Rr]elease/\n[Rr]eleases/\nx64/\nx86/\n[Aa][Rr][Mm]/\n[Aa][Rr][Mm]64/\nbld/\n[Bb]in/\n[Oo]bj/\n[Ll]og/\n[Ll]ogs/\n\n# Visual Studio 2015/2017 cache/options directory\n.vs/\n# Uncomment if you have tasks that create the project's static files in wwwroot\n#wwwroot/\n\n# Visual Studio 2017 auto generated files\nGenerated\\ Files/\n\n# MSTest test Results\n[Tt]est[Rr]esult*/\n[Bb]uild[Ll]og.*\n\n# NUnit\n*.VisualState.xml\nTestResult.xml\nnunit-*.xml\n\n# Build Results of an ATL Project\n[Dd]ebugPS/\n[Rr]eleasePS/\ndlldata.c\n\n# Benchmark Results\nBenchmarkDotNet.Artifacts/\n\n# .NET Core\nproject.lock.json\nproject.fragment.lock.json\nartifacts/\n\n# StyleCop\nStyleCopReport.xml\n\n# Files built by Visual Studio\n*_i.c\n*_p.c\n*_h.h\n*.ilk\n*.meta\n*.obj\n*.iobj\n*.pch\n*.pdb\n*.ipdb\n*.pgc\n*.pgd\n*.rsp\n*.sbr\n*.tlb\n*.tli\n*.tlh\n*.tmp\n*.tmp_proj\n*_wpftmp.csproj\n*.log\n*.vspscc\n*.vssscc\n.builds\n*.pidb\n*.svclog\n*.scc\n\n# Chutzpah Test files\n_Chutzpah*\n\n# Visual C++ cache files\nipch/\n*.aps\n*.ncb\n*.opendb\n*.opensdf\n*.sdf\n*.cachefile\n*.VC.db\n*.VC.VC.opendb\n\n# Visual Studio profiler\n*.psess\n*.vsp\n*.vspx\n*.sap\n\n# Visual Studio Trace Files\n*.e2e\n\n# TFS 2012 Local Workspace\n$tf/\n\n# Guidance Automation Toolkit\n*.gpState\n\n# ReSharper is a .NET coding add-in\n_ReSharper*/\n*.[Rr]e[Ss]harper\n*.DotSettings.user\n\n# JustCode is a .NET coding add-in\n.JustCode\n\n# TeamCity is a build add-in\n_TeamCity*\n\n# DotCover is a Code Coverage Tool\n*.dotCover\n\n# AxoCover is a Code Coverage Tool\n.axoCover/*\n!.axoCover/settings.json\n\n# Visual Studio code coverage results\n*.coverage\n*.coveragexml\n\n# NCrunch\n_NCrunch_*\n.*crunch*.local.xml\nnCrunchTemp_*\n\n# MightyMoose\n*.mm.*\nAutoTest.Net/\n\n# Web workbench (sass)\n.sass-cache/\n\n# Installshield output folder\n[Ee]xpress/\n\n# DocProject is a documentation generator add-in\nDocProject/buildhelp/\nDocProject/Help/*.HxT\nDocProject/Help/*.HxC\nDocProject/Help/*.hhc\nDocProject/Help/*.hhk\nDocProject/Help/*.hhp\nDocProject/Help/Html2\nDocProject/Help/html\n\n# Click-Once directory\npublish/\n\n# Publish Web Output\n*.[Pp]ublish.xml\n*.azurePubxml\n# Note: Comment the next line if you want to checkin your web deploy settings,\n# but database connection strings (with potential passwords) will be unencrypted\n*.pubxml\n*.publishproj\n\n# Microsoft Azure Web App publish settings. Comment the next line if you want to\n# checkin your Azure Web App publish settings, but sensitive information contained\n# in these scripts will be unencrypted\nPublishScripts/\n\n# NuGet Packages\n*.nupkg\n# NuGet Symbol Packages\n*.snupkg\n# The packages folder can be ignored because of Package Restore\n**/[Pp]ackages/*\n# except build/, which is used as an MSBuild target.\n!**/[Pp]ackages/build/\n# Uncomment if necessary however generally it will be regenerated when needed\n#!**/[Pp]ackages/repositories.config\n# NuGet v3's project.json files produces more ignorable files\n*.nuget.props\n*.nuget.targets\n\n# Microsoft Azure Build Output\ncsx/\n*.build.csdef\n\n# Microsoft Azure Emulator\necf/\nrcf/\n\n# Windows Store app package directories and files\nAppPackages/\nBundleArtifacts/\nPackage.StoreAssociation.xml\n_pkginfo.txt\n*.appx\n*.appxbundle\n*.appxupload\n\n# Visual Studio cache files\n# files ending in .cache can be ignored\n*.[Cc]ache\n# but keep track of directories ending in .cache\n!?*.[Cc]ache/\n\n# Others\nClientBin/\n~$*\n*~\n*.dbmdl\n*.dbproj.schemaview\n*.jfm\n*.pfx\n*.publishsettings\norleans.codegen.cs\n\n# Including strong name files can present a security risk\n# (https://github.com/github/gitignore/pull/2483#issue-259490424)\n#*.snk\n\n# Since there are multiple workflows, uncomment next line to ignore bower_components\n# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)\n#bower_components/\n\n# RIA/Silverlight projects\nGenerated_Code/\n\n# Backup & report files from converting an old project file\n# to a newer Visual Studio version. Backup files are not needed,\n# because we have git ;-)\n_UpgradeReport_Files/\nBackup*/\nUpgradeLog*.XML\nUpgradeLog*.htm\nServiceFabricBackup/\n*.rptproj.bak\n\n# SQL Server files\n*.mdf\n*.ldf\n*.ndf\n\n# Business Intelligence projects\n*.rdl.data\n*.bim.layout\n*.bim_*.settings\n*.rptproj.rsuser\n*- [Bb]ackup.rdl\n*- [Bb]ackup ([0-9]).rdl\n*- [Bb]ackup ([0-9][0-9]).rdl\n\n# Microsoft Fakes\nFakesAssemblies/\n\n# GhostDoc plugin setting file\n*.GhostDoc.xml\n\n# Node.js Tools for Visual Studio\n.ntvs_analysis.dat\nnode_modules/\n\n# Visual Studio 6 build log\n*.plg\n\n# Visual Studio 6 workspace options file\n*.opt\n\n# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)\n*.vbw\n\n# Visual Studio LightSwitch build output\n**/*.HTMLClient/GeneratedArtifacts\n**/*.DesktopClient/GeneratedArtifacts\n**/*.DesktopClient/ModelManifest.xml\n**/*.Server/GeneratedArtifacts\n**/*.Server/ModelManifest.xml\n_Pvt_Extensions\n\n# Paket dependency manager\n.paket/paket.exe\npaket-files/\n\n# FAKE - F# Make\n.fake/\n\n# CodeRush personal settings\n.cr/personal\n\n# Python Tools for Visual Studio (PTVS)\n__pycache__/\n*.pyc\n\n# Cake - Uncomment if you are using it\n# tools/**\n# !tools/packages.config\n\n# Tabs Studio\n*.tss\n\n# Telerik's JustMock configuration file\n*.jmconfig\n\n# BizTalk build output\n*.btp.cs\n*.btm.cs\n*.odx.cs\n*.xsd.cs\n\n# OpenCover UI analysis results\nOpenCover/\n\n# Azure Stream Analytics local run output\nASALocalRun/\n\n# MSBuild Binary and Structured Log\n*.binlog\n\n# NVidia Nsight GPU debugger configuration file\n*.nvuser\n\n# MFractors (Xamarin productivity tool) working folder\n.mfractor/\n\n# Local History for Visual Studio\n.localhistory/\n\n# BeatPulse healthcheck temp database\nhealthchecksdb\n\n# Backup folder for Package Reference Convert tool in Visual Studio 2017\nMigrationBackup/\n\n# Ionide (cross platform F# VS Code tools) working folder\n.ionide/\n\n.DS_Store\ndist/\ntmp/\nbuild/\n\n.idea/\n.vscode/\n.nyc_output/\ncoverage/\n.codacy-coverage/\n\npackage-lock.json\nyarn.lock\n\nsize-plugin.json\nsize-plugin-ssr.json\n\n.parcel-cache\n"
  },
  {
    "path": ".husky/.gitignore",
    "content": "_"
  },
  {
    "path": ".husky/commit-msg",
    "content": "#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\nnpx --no -- commitlint --edit \"\"\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07)\n\n\n### Bug Fixes\n\n* **deps:** update dependency @testing-library/jest-dom to v6 ([ba7f6c0](https://github.com/tsparticles/react/commit/ba7f6c08f5373eaf83838ba579c4a755353ac6b4))\n* fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a))\n\n\n### Features\n\n* added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3))\n* converted component to hooks API, closes [#49](https://github.com/tsparticles/react/issues/49) ([4a9eaa0](https://github.com/tsparticles/react/commit/4a9eaa018052e244ed217446e8b56cb8dfc582ed))\n\n\n\n\n\n## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11)\n\n\n### Bug Fixes\n\n* fixed issue with component update ([7043e2c](https://github.com/tsparticles/react/commit/7043e2c5ec615a4c37f558716ece80b366ab696e))\n\n\n\n\n\n## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)\n\n**Note:** Version bump only for package @tsparticles/react-workspace\n\n\n\n\n\n# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)\n\n\n### Bug Fixes\n\n* **deps:** update dependency @testing-library/react to v14 ([107b5c9](https://github.com/tsparticles/react/commit/107b5c9c76478bb6eb0ae9d1873f62beefc423a9))\n* **deps:** update dependency @testing-library/user-event to v14 ([62043e2](https://github.com/tsparticles/react/commit/62043e22da2caefcbccc1dfa563aa01a2f6769b4))\n* **deps:** update dependency web-vitals to v3 ([d3b48dc](https://github.com/tsparticles/react/commit/d3b48dcf6927778903314696c3b6b351d4eaed4f))\n\n\n\n\n\n# [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14)\n\n\n### Bug Fixes\n\n* fixed container link, closes [#34](https://github.com/tsparticles/react/issues/34) ([a1c206a](https://github.com/tsparticles/react/commit/a1c206af0f0245715b67b6a6eafd906c897acc8e))\n\n\n\n\n\n## 2.10.1 (2023-06-04)\n\n\n### Bug Fixes\n\n* changed deep equal library, the previous one had a bug for circular objects and freezed all ([ccb5f12](https://github.com/tsparticles/react/commit/ccb5f124a69ce622fe591fc8944015da64f8f799))\n* **deps:** update dependency @next/font to v13.2.1 ([05372e8](https://github.com/tsparticles/react/commit/05372e8b78d10b0e2e1360c046b6eb32c279389f))\n* **deps:** update dependency @next/font to v13.2.3 ([abdded8](https://github.com/tsparticles/react/commit/abdded840c5e46cdc428a591ccf6448bd601bd63))\n* **deps:** update dependency @next/font to v13.3.0 ([090176d](https://github.com/tsparticles/react/commit/090176de2b16bb7589241bf06fa40f92d0191f4c))\n* **deps:** update dependency @next/font to v13.3.1 ([f4c94cb](https://github.com/tsparticles/react/commit/f4c94cb2a72dd32d947273dd8566bc459ec0876d))\n* **deps:** update dependency @next/font to v13.3.3 ([d1b0ac6](https://github.com/tsparticles/react/commit/d1b0ac63010c6da4b1ba83ee3982b40e3e509a02))\n* **deps:** update dependency @next/font to v13.3.4 ([47aa225](https://github.com/tsparticles/react/commit/47aa225f0e16ef70d6b721fe67472757e0f211da))\n* **deps:** update dependency @next/font to v13.4.0 ([62caba7](https://github.com/tsparticles/react/commit/62caba7b5161e7ffd22298cff6efe0318928ee9e))\n* **deps:** update dependency @next/font to v13.4.1 ([5b21bdb](https://github.com/tsparticles/react/commit/5b21bdb26fdcd00762cf5043ce6d3f025720462d))\n\n\n### Features\n\n* updated templates to React 18 ([d9ae354](https://github.com/tsparticles/react/commit/d9ae354d71f245e85009c96007bd59df7bd422c8))\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Matteo Bruni\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "[![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&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>\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = (container) => {\n    console.log(container);\n  };\n\n  const options = useMemo(\n    () => ({\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      <Particles\n        id=\"tsparticles\"\n        particlesLoaded={particlesLoaded}\n        options={options}\n      />\n    );\n  }\n\n  return <></>;\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = async (container?: Container): Promise<void> => {\n    console.log(container);\n  };\n\n  const options: ISourceOptions = useMemo(\n    () => ({\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      <Particles\n        id=\"tsparticles\"\n        particlesLoaded={particlesLoaded}\n        options={options}\n      />\n    );\n  }\n\n  return <></>;\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = (container) => {\n    console.log(container);\n  };\n\n  if (init) {\n    return (\n      <Particles\n        id=\"tsparticles\"\n        url=\"http://foo.bar/particles.json\"\n        particlesLoaded={particlesLoaded}\n      />\n    );\n  }\n\n  return <></>;\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = async (container?: Container) => {\n    console.log(container);\n  };\n\n  if (init) {\n    return (\n      <Particles\n        id=\"tsparticles\"\n        url=\"http://foo.bar/particles.json\"\n        particlesLoaded={particlesLoaded}\n      />\n    );\n  }\n\n  return <></>;\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"
  },
  {
    "path": "apps/nextjs/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "apps/nextjs/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "apps/nextjs/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07)\n\n\n### Bug Fixes\n\n* fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a))\n\n\n### Features\n\n* added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3))\n\n\n\n\n\n## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11)\n\n**Note:** Version bump only for package nextjs\n\n\n\n\n\n## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)\n\n**Note:** Version bump only for package nextjs\n\n\n\n\n\n# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)\n\n**Note:** Version bump only for package nextjs\n\n\n\n\n\n# [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14)\n\n**Note:** Version bump only for package nextjs\n\n\n\n\n\n## 2.10.1 (2023-06-04)\n\n**Note:** Version bump only for package nextjs\n\n\n\n\n\n## [0.11.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.11.2...nextjs@0.11.3) (2023-02-12)\n\n**Note:** Version bump only for package nextjs\n\n## [0.11.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.11.1...nextjs@0.11.2) (2023-02-12)\n\n**Note:** Version bump only for package nextjs\n\n## [0.11.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.11.0...nextjs@0.11.1) (2023-02-11)\n\n**Note:** Version bump only for package nextjs\n\n# [0.11.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.10.0...nextjs@0.11.0) (2023-02-10)\n\n**Note:** Version bump only for package nextjs\n\n# [0.10.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.9.1...nextjs@0.10.0) (2023-01-18)\n\n**Note:** Version bump only for package nextjs\n\n## [0.9.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.9.0...nextjs@0.9.1) (2022-12-25)\n\n**Note:** Version bump only for package nextjs\n\n# [0.9.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.8.0...nextjs@0.9.0) (2022-12-23)\n\n**Note:** Version bump only for package nextjs\n\n# [0.8.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.3...nextjs@0.8.0) (2022-12-06)\n\n**Note:** Version bump only for package nextjs\n\n## [0.7.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.2...nextjs@0.7.3) (2022-11-07)\n\n**Note:** Version bump only for package nextjs\n\n## [0.7.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.1...nextjs@0.7.2) (2022-11-07)\n\n**Note:** Version bump only for package nextjs\n\n## [0.7.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.0...nextjs@0.7.1) (2022-11-03)\n\n**Note:** Version bump only for package nextjs\n\n# [0.7.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.6.0...nextjs@0.7.0) (2022-11-02)\n\n**Note:** Version bump only for package nextjs\n\n# [0.6.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.4...nextjs@0.6.0) (2022-10-30)\n\n**Note:** Version bump only for package nextjs\n\n## [0.5.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.3...nextjs@0.5.4) (2022-09-30)\n\n**Note:** Version bump only for package nextjs\n\n## [0.5.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.2...nextjs@0.5.3) (2022-09-30)\n\n**Note:** Version bump only for package nextjs\n\n## [0.5.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.1...nextjs@0.5.2) (2022-09-21)\n\n**Note:** Version bump only for package nextjs\n\n## [0.5.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.0...nextjs@0.5.1) (2022-09-13)\n\n**Note:** Version bump only for package nextjs\n\n# [0.5.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.4...nextjs@0.5.0) (2022-09-11)\n\n### Bug Fixes\n\n-   **deps:** update dependency next to v12.2.4 [security] ([8ac6931](https://github.com/tsparticles/tsparticles/commit/8ac6931121a264d986f96e0a59db517ccb404451))\n\n## [0.4.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.2...nextjs@0.4.4) (2022-08-26)\n\n**Note:** Version bump only for package nextjs\n\n## [0.4.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.2...nextjs@0.4.3) (2022-08-21)\n\n**Note:** Version bump only for package nextjs\n\n## [0.4.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.1...nextjs@0.4.2) (2022-08-16)\n\n**Note:** Version bump only for package nextjs\n\n## [0.4.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.0...nextjs@0.4.1) (2022-08-12)\n\n**Note:** Version bump only for package nextjs\n\n# [0.4.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.4...nextjs@0.4.0) (2022-08-11)\n\n**Note:** Version bump only for package nextjs\n\n## [0.3.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.3...nextjs@0.3.4) (2022-07-28)\n\n### Features\n\n-   preparing @tsparticles/react and switching alternate packages ([49e749e](https://github.com/tsparticles/tsparticles/commit/49e749e90e076f0cb22eefe0f3399102f5b9fb35))\n\n## [0.3.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.2...nextjs@0.3.3) (2022-07-01)\n\n**Note:** Version bump only for package nextjs\n\n## [0.3.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.1...nextjs@0.3.2) (2022-07-01)\n\n**Note:** Version bump only for package nextjs\n\n## [0.3.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.0...nextjs@0.3.1) (2022-07-01)\n\n**Note:** Version bump only for package nextjs\n\n# [0.3.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.4...nextjs@0.3.0) (2022-06-18)\n\n### Bug Fixes\n\n-   **deps:** update react monorepo to v18.1.0 ([6b45793](https://github.com/tsparticles/tsparticles/commit/6b457937c41d7681a2135dfcb6ff220e578f22bb))\n\n## [0.2.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.3...nextjs@0.2.4) (2022-04-16)\n\n**Note:** Version bump only for package nextjs\n\n## [0.2.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.2...nextjs@0.2.3) (2022-04-14)\n\n**Note:** Version bump only for package nextjs\n\n## [0.2.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.1...nextjs@0.2.2) (2022-04-06)\n\n### Bug Fixes\n\n-   **deps:** update react monorepo to v18 ([4a434e6](https://github.com/tsparticles/tsparticles/commit/4a434e6217f7b65291da2a053af8f2ded70c879c))\n\n## [0.2.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.0...nextjs@0.2.1) (2022-04-06)\n\n**Note:** Version bump only for package nextjs\n\n# [0.2.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.1.1...nextjs@0.2.0) (2022-04-04)\n\n### Bug Fixes\n\n-   **deps:** update react monorepo to v18 ([79e531d](https://github.com/tsparticles/tsparticles/commit/79e531dc77dd73c9493e30e9eb23f5620a860ea9))\n\n## 0.1.1 (2022-03-20)\n\n**Note:** Version bump only for package nextjs\n"
  },
  {
    "path": "apps/nextjs/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\npnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "apps/nextjs/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "apps/nextjs/package.json",
    "content": "{\n  \"name\": \"nextjs\",\n  \"version\": \"3.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"build:ci\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"@tsparticles/engine\": \"^3.0.2\",\n    \"@tsparticles/preset-big-circles\": \"^3.0.0\",\n    \"@tsparticles/react\": \"workspace:^\",\n    \"next\": \"^14.0.3\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"typescript\": \"^5.3.3\"\n  },\n  \"devDependencies\": {\n    \"eslint\": \"^8.55.0\",\n    \"eslint-config-next\": \"^14.0.3\"\n  }\n}\n"
  },
  {
    "path": "apps/nextjs/pages/_app.js",
    "content": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "apps/nextjs/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "apps/nextjs/pages/index.js",
    "content": "import Head from \"next/head\";\nimport Image from \"next/image\";\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\nimport { loadBigCirclesPreset } from \"@tsparticles/preset-big-circles\";\nimport styles from \"../styles/Home.module.css\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nexport default function Home() {\n    const particlesInitCb = useCallback(async (engine) => {\n        console.log(\"callback\");\n\n        await loadBigCirclesPreset(engine);\n    }, []);\n\n    const particlesLoaded = useCallback((container) => {\n        console.log(\"loaded\", container);\n    }, []);\n\n    const [ init, setInit ] = useState(false);\n\n    useEffect(() => {\n        initParticlesEngine(particlesInitCb).then(() => {\n            setInit(true);\n        });\n    }, []);\n\n    const options = useMemo(\n        () => ({\n            preset: \"bigCircles\",\n            fullScreen: {\n                zIndex: -1,\n            },\n        }),\n        []\n    );\n\n    return (\n        <div className={styles.container}>\n            <Head>\n                <title>Create Next App</title>\n                <meta name=\"description\" content=\"Generated by create next app\"/>\n                <link rel=\"icon\" href=\"/favicon.ico\"/>\n            </Head>\n\n            <main className={styles.main}>\n                <h1 className={styles.title}>\n                    Welcome to <a href=\"https://nextjs.org\">Next.js!</a>\n                </h1>\n\n                <p className={styles.description}>\n                    Get started by editing{\" \"}\n                    <code className={styles.code}>pages/index.js</code>\n                </p>\n\n                <div className={styles.grid}>\n                    <a href=\"https://nextjs.org/docs\" className={styles.card}>\n                        <h2>Documentation &rarr;</h2>\n                        <p>Find in-depth information about Next.js features and API.</p>\n                    </a>\n\n                    <a href=\"https://nextjs.org/learn\" className={styles.card}>\n                        <h2>Learn &rarr;</h2>\n                        <p>Learn about Next.js in an interactive course with quizzes!</p>\n                    </a>\n\n                    <a\n                        href=\"https://github.com/vercel/next.js/tree/canary/examples\"\n                        className={styles.card}\n                    >\n                        <h2>Examples &rarr;</h2>\n                        <p>Discover and deploy boilerplate example Next.js projects.</p>\n                    </a>\n\n                    <a\n                        href=\"https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app\"\n                        className={styles.card}\n                    >\n                        <h2>Deploy &rarr;</h2>\n                        <p>\n                            Instantly deploy your Next.js site to a public URL with Vercel.\n                        </p>\n                    </a>\n                </div>\n            </main>\n\n            <footer className={styles.footer}>\n                <a\n                    href=\"https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    Powered by{\" \"}\n                    <span className={styles.logo}>\n            <Image src=\"/vercel.svg\" alt=\"Vercel Logo\" width={72} height={16}/>\n          </span>\n                </a>\n            </footer>\n            {init && (\n                <Particles\n                    id=\"tsparticles\"\n                    options={options}\n                    particlesLoaded={particlesLoaded}\n                />\n            )}\n        </div>\n    );\n}\n"
  },
  {
    "path": "apps/nextjs/styles/Home.module.css",
    "content": ".container {\n  /*padding: 0 2rem;*/\n}\n\n.main {\n  min-height: 100vh;\n  padding: 4rem 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.footer {\n  display: flex;\n  flex: 1;\n  padding: 2rem 0;\n  border-top: 1px solid #eaeaea;\n  justify-content: center;\n  align-items: center;\n  backdrop-filter: blur(50px);\n  -webkit-backdrop-filter: blur(50px);\n}\n\n.footer a {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n}\n\n.title a {\n  color: #0070f3;\n  text-decoration: none;\n}\n\n.title a:hover,\n.title a:focus,\n.title a:active {\n  text-decoration: underline;\n}\n\n.title {\n  margin: 0;\n  line-height: 1.15;\n  font-size: 4rem;\n}\n\n.title,\n.description {\n  text-align: center;\n}\n\n.description {\n  margin: 4rem 0;\n  line-height: 1.5;\n  font-size: 1.5rem;\n}\n\n.code {\n  background: #fafafa;\n  color: black;\n  border-radius: 5px;\n  padding: 0.75rem;\n  font-size: 1.1rem;\n  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n    Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.grid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n  max-width: 800px;\n}\n\n.card {\n  margin: 1rem;\n  padding: 1.5rem;\n  text-align: left;\n  color: inherit;\n  text-decoration: none;\n  border: 1px solid #eaeaea;\n  border-radius: 10px;\n  transition: color 0.15s ease, border-color 0.15s ease;\n  max-width: 300px;\n  backdrop-filter: blur(50px);\n  -webkit-backdrop-filter: blur(50px);\n}\n\n.card:hover,\n.card:focus,\n.card:active {\n  color: #0070f3;\n  border-color: #0070f3;\n}\n\n.card h2 {\n  margin: 0 0 1rem 0;\n  font-size: 1.5rem;\n}\n\n.card p {\n  margin: 0;\n  font-size: 1.25rem;\n  line-height: 1.5;\n}\n\n.logo {\n  height: 1em;\n  margin-left: 0.5rem;\n  background: white;\n}\n\n@media (max-width: 600px) {\n  .grid {\n    width: 100%;\n    flex-direction: column;\n  }\n}\n"
  },
  {
    "path": "apps/nextjs/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n  /*color: white;*/\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "apps/nextjs-beta/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "apps/nextjs-beta/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n"
  },
  {
    "path": "apps/nextjs-beta/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07)\n\n\n### Bug Fixes\n\n* fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a))\n\n\n### Features\n\n* added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3))\n\n\n\n\n\n## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n\n\n\n\n## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n\n\n\n\n# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n\n\n\n\n# [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n\n\n\n\n## 2.10.1 (2023-06-04)\n\n\n### Bug Fixes\n\n* **deps:** update dependency @next/font to v13.2.1 ([05372e8](https://github.com/tsparticles/react/commit/05372e8b78d10b0e2e1360c046b6eb32c279389f))\n* **deps:** update dependency @next/font to v13.2.3 ([abdded8](https://github.com/tsparticles/react/commit/abdded840c5e46cdc428a591ccf6448bd601bd63))\n* **deps:** update dependency @next/font to v13.3.0 ([090176d](https://github.com/tsparticles/react/commit/090176de2b16bb7589241bf06fa40f92d0191f4c))\n* **deps:** update dependency @next/font to v13.3.1 ([f4c94cb](https://github.com/tsparticles/react/commit/f4c94cb2a72dd32d947273dd8566bc459ec0876d))\n* **deps:** update dependency @next/font to v13.3.3 ([d1b0ac6](https://github.com/tsparticles/react/commit/d1b0ac63010c6da4b1ba83ee3982b40e3e509a02))\n* **deps:** update dependency @next/font to v13.3.4 ([47aa225](https://github.com/tsparticles/react/commit/47aa225f0e16ef70d6b721fe67472757e0f211da))\n* **deps:** update dependency @next/font to v13.4.0 ([62caba7](https://github.com/tsparticles/react/commit/62caba7b5161e7ffd22298cff6efe0318928ee9e))\n* **deps:** update dependency @next/font to v13.4.1 ([5b21bdb](https://github.com/tsparticles/react/commit/5b21bdb26fdcd00762cf5043ce6d3f025720462d))\n\n\n\n\n\n## [0.3.3](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.3.2...nextjs-beta-demo@0.3.3) (2023-02-12)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n## [0.3.2](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.3.1...nextjs-beta-demo@0.3.2) (2023-02-12)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n## [0.3.1](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.3.0...nextjs-beta-demo@0.3.1) (2023-02-11)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n# [0.3.0](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.2.0...nextjs-beta-demo@0.3.0) (2023-02-10)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n# [0.2.0](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.1.1...nextjs-beta-demo@0.2.0) (2023-01-18)\n\n**Note:** Version bump only for package nextjs-beta-demo\n\n## 0.1.1 (2022-12-25)\n\n**Note:** Version bump only for package nextjs-beta-demo\n"
  },
  {
    "path": "apps/nextjs-beta/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "apps/nextjs-beta/app/globals.css",
    "content": ":root {\n  --max-width: 1100px;\n  --border-radius: 12px;\n  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',\n    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',\n    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;\n\n  --foreground-rgb: 0, 0, 0;\n  --background-start-rgb: 214, 219, 220;\n  --background-end-rgb: 255, 255, 255;\n\n  --primary-glow: conic-gradient(\n    from 180deg at 50% 50%,\n    #16abff33 0deg,\n    #0885ff33 55deg,\n    #54d6ff33 120deg,\n    #0071ff33 160deg,\n    transparent 360deg\n  );\n  --secondary-glow: radial-gradient(\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n\n  --tile-start-rgb: 239, 245, 249;\n  --tile-end-rgb: 228, 232, 233;\n  --tile-border: conic-gradient(\n    #00000080,\n    #00000040,\n    #00000030,\n    #00000020,\n    #00000010,\n    #00000010,\n    #00000080\n  );\n\n  --callout-rgb: 238, 240, 241;\n  --callout-border-rgb: 172, 175, 176;\n  --card-rgb: 180, 185, 188;\n  --card-border-rgb: 131, 134, 135;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --foreground-rgb: 255, 255, 255;\n    --background-start-rgb: 0, 0, 0;\n    --background-end-rgb: 0, 0, 0;\n\n    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));\n    --secondary-glow: linear-gradient(\n      to bottom right,\n      rgba(1, 65, 255, 0),\n      rgba(1, 65, 255, 0),\n      rgba(1, 65, 255, 0.3)\n    );\n\n    --tile-start-rgb: 2, 13, 46;\n    --tile-end-rgb: 2, 5, 19;\n    --tile-border: conic-gradient(\n      #ffffff80,\n      #ffffff40,\n      #ffffff30,\n      #ffffff20,\n      #ffffff10,\n      #ffffff10,\n      #ffffff80\n    );\n\n    --callout-rgb: 20, 20, 20;\n    --callout-border-rgb: 108, 108, 108;\n    --card-rgb: 100, 100, 100;\n    --card-border-rgb: 200, 200, 200;\n  }\n}\n\n* {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n}\n\nhtml,\nbody {\n  max-width: 100vw;\n  overflow-x: hidden;\n}\n\nbody {\n  color: rgb(var(--foreground-rgb));\n  background: linear-gradient(\n      to bottom,\n      transparent,\n      rgb(var(--background-end-rgb))\n    )\n    rgb(var(--background-start-rgb));\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  html {\n    color-scheme: dark;\n  }\n}\n"
  },
  {
    "path": "apps/nextjs-beta/app/head.tsx",
    "content": "export default function Head() {\n  return (\n    <>\n      <title>Create Next App</title>\n      <meta content=\"width=device-width, initial-scale=1\" name=\"viewport\" />\n      <meta name=\"description\" content=\"Generated by create next app\" />\n      <link rel=\"icon\" href=\"/favicon.ico\" />\n    </>\n  )\n}\n"
  },
  {
    "path": "apps/nextjs-beta/app/layout.tsx",
    "content": "import \"./globals.css\";\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      {/*\n        <head /> will contain the components returned by the nearest parent\n        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head\n      */}\n      <head />\n      <body>{children}</body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "apps/nextjs-beta/app/page.module.css",
    "content": ".main {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  padding: 6rem;\n  min-height: 100vh;\n}\n\n.description {\n  display: inherit;\n  justify-content: inherit;\n  align-items: inherit;\n  font-size: 0.85rem;\n  max-width: var(--max-width);\n  width: 100%;\n  z-index: 2;\n  font-family: var(--font-mono);\n}\n\n.description a {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n\n.description p {\n  position: relative;\n  margin: 0;\n  padding: 1rem;\n  background-color: rgba(var(--callout-rgb), 0.5);\n  border: 1px solid rgba(var(--callout-border-rgb), 0.3);\n  border-radius: var(--border-radius);\n}\n\n.code {\n  font-weight: 700;\n  font-family: var(--font-mono);\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(33%, auto));\n  width: var(--max-width);\n  max-width: 100%;\n}\n\n.card {\n  padding: 1rem 1.2rem;\n  border-radius: var(--border-radius);\n  background: rgba(var(--card-rgb), 0);\n  border: 1px solid rgba(var(--card-border-rgb), 0);\n  transition: background 200ms, border 200ms;\n}\n\n.card span {\n  display: inline-block;\n  transition: transform 200ms;\n}\n\n.card h2 {\n  font-weight: 600;\n  margin-bottom: 0.7rem;\n}\n\n.card p {\n  margin: 0;\n  opacity: 0.6;\n  font-size: 0.9rem;\n  line-height: 1.5;\n  max-width: 34ch;\n}\n\n.center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding: 4rem 0;\n}\n\n.center::before {\n  background: var(--secondary-glow);\n  border-radius: 50%;\n  width: 480px;\n  height: 360px;\n  margin-left: -400px;\n}\n\n.center::after {\n  background: var(--primary-glow);\n  width: 240px;\n  height: 180px;\n  z-index: -1;\n}\n\n.center::before,\n.center::after {\n  content: '';\n  left: 50%;\n  position: absolute;\n  filter: blur(45px);\n  transform: translateZ(0);\n}\n\n.logo,\n.thirteen {\n  position: relative;\n}\n\n.thirteen {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 75px;\n  height: 75px;\n  padding: 25px 10px;\n  margin-left: 16px;\n  transform: translateZ(0);\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  box-shadow: 0px 2px 8px -1px #0000001a;\n}\n\n.thirteen::before,\n.thirteen::after {\n  content: '';\n  position: absolute;\n  z-index: -1;\n}\n\n/* Conic Gradient Animation */\n.thirteen::before {\n  animation: 6s rotate linear infinite;\n  width: 200%;\n  height: 200%;\n  background: var(--tile-border);\n}\n\n/* Inner Square */\n.thirteen::after {\n  inset: 0;\n  padding: 1px;\n  border-radius: var(--border-radius);\n  background: linear-gradient(\n    to bottom right,\n    rgba(var(--tile-start-rgb), 1),\n    rgba(var(--tile-end-rgb), 1)\n  );\n  background-clip: content-box;\n}\n\n/* Enable hover only on non-touch devices */\n@media (hover: hover) and (pointer: fine) {\n  .card:hover {\n    background: rgba(var(--card-rgb), 0.1);\n    border: 1px solid rgba(var(--card-border-rgb), 0.15);\n  }\n\n  .card:hover span {\n    transform: translateX(4px);\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .thirteen::before {\n    animation: none;\n  }\n\n  .card:hover span {\n    transform: none;\n  }\n}\n\n/* Mobile and Tablet */\n@media (max-width: 1023px) {\n  .content {\n    padding: 4rem;\n  }\n\n  .grid {\n    grid-template-columns: 1fr;\n    margin-bottom: 120px;\n    max-width: 320px;\n    text-align: center;\n  }\n\n  .card {\n    padding: 1rem 2.5rem;\n  }\n\n  .card h2 {\n    margin-bottom: 0.5rem;\n  }\n\n  .center {\n    padding: 8rem 0 6rem;\n  }\n\n  .center::before {\n    transform: none;\n    height: 300px;\n  }\n\n  .description {\n    font-size: 0.8rem;\n  }\n\n  .description a {\n    padding: 1rem;\n  }\n\n  .description p,\n  .description div {\n    display: flex;\n    justify-content: center;\n    position: fixed;\n    width: 100%;\n  }\n\n  .description p {\n    align-items: center;\n    inset: 0 0 auto;\n    padding: 2rem 1rem 1.4rem;\n    border-radius: 0;\n    border: none;\n    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);\n    background: linear-gradient(\n      to bottom,\n      rgba(var(--background-start-rgb), 1),\n      rgba(var(--callout-rgb), 0.5)\n    );\n    background-clip: padding-box;\n    backdrop-filter: blur(24px);\n  }\n\n  .description div {\n    align-items: flex-end;\n    pointer-events: none;\n    inset: auto 0 0;\n    padding: 2rem;\n    height: 200px;\n    background: linear-gradient(\n      to bottom,\n      transparent 0%,\n      rgb(var(--background-end-rgb)) 40%\n    );\n    z-index: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  .vercelLogo {\n    filter: invert(1);\n  }\n\n  .logo,\n  .thirteen img {\n    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);\n  }\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n}\n"
  },
  {
    "path": "apps/nextjs-beta/app/page.tsx",
    "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { Inter } from \"@next/font/google\";\nimport styles from \"./page.module.css\";\nimport Particles from \"./particles\";\nimport { useEffect, useState } from \"react\";\nimport { initParticlesEngine } from \"@tsparticles/react\";\nimport { loadFull } from \"tsparticles\";\nimport { Engine } from \"@tsparticles/engine\";\n\nconst inter = Inter({ subsets: [ \"latin\" ] });\n\nexport default function Home() {\n    const [ init, setInit ] = useState(false);\n\n    useEffect(() => {\n        initParticlesEngine(async (engine: Engine) => {\n            await loadFull(engine);\n        }).then(() => {\n            setInit(true);\n        });\n    }, []);\n\n    return (\n        <main className={styles.main}>\n            <Particles id=\"tsparticles\" done={init}/>\n            <div className={styles.description}>\n                <p>\n                    Get started by editing&nbsp;\n                    <code className={styles.code}>app/page.tsx</code>\n                </p>\n                <div>\n                    <a\n                        href=\"https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                    >\n                        By{\" \"}\n                        <Image\n                            src=\"/vercel.svg\"\n                            alt=\"Vercel Logo\"\n                            className={styles.vercelLogo}\n                            width={100}\n                            height={24}\n                            priority\n                        />\n                    </a>\n                </div>\n            </div>\n\n            <div className={styles.center}>\n                <Image\n                    className={styles.logo}\n                    src=\"/next.svg\"\n                    alt=\"Next.js Logo\"\n                    width={180}\n                    height={37}\n                    priority\n                />\n                <div className={styles.thirteen}>\n                    <Image src=\"/thirteen.svg\" alt=\"13\" width={40} height={31} priority/>\n                </div>\n            </div>\n\n            <div className={styles.grid}>\n                <a\n                    href=\"https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n                    className={styles.card}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    <h2 className={inter.className}>\n                        Docs <span>-&gt;</span>\n                    </h2>\n                    <p className={inter.className}>\n                        Find in-depth information about Next.js features and API.\n                    </p>\n                </a>\n\n                <a\n                    href=\"https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n                    className={styles.card}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    <h2 className={inter.className}>\n                        Templates <span>-&gt;</span>\n                    </h2>\n                    <p className={inter.className}>Explore the Next.js 13 playground.</p>\n                </a>\n\n                <a\n                    href=\"https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n                    className={styles.card}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    <h2 className={inter.className}>\n                        Deploy <span>-&gt;</span>\n                    </h2>\n                    <p className={inter.className}>\n                        Instantly deploy your Next.js site to a shareable URL with Vercel.\n                    </p>\n                </a>\n            </div>\n        </main>\n    );\n}\n"
  },
  {
    "path": "apps/nextjs-beta/app/particles.tsx",
    "content": "\"use client\";\n\nimport Particles from \"@tsparticles/react\";\nimport configs from \"@tsparticles/configs\";\n\nexport default function ParticlesComponent(props: {\n    id: string;\n    done: boolean;\n}) {\n    return props.done && <Particles id={props.id} options={configs.basic}/>;\n}\n"
  },
  {
    "path": "apps/nextjs-beta/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  experimental: {\n    appDir: true,\n  },\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "apps/nextjs-beta/package.json",
    "content": "{\n  \"name\": \"nextjs-beta-demo\",\n  \"version\": \"3.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"build:ci\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"@next/font\": \"^14.0.3\",\n    \"@tsparticles/configs\": \"^3.0.2\",\n    \"@tsparticles/engine\": \"^3.0.2\",\n    \"@tsparticles/react\": \"workspace:^\",\n    \"@types/node\": \"^20.10.4\",\n    \"@types/react\": \"^18.2.42\",\n    \"@types/react-dom\": \"^18.2.17\",\n    \"eslint\": \"^8.55.0\",\n    \"eslint-config-next\": \"^14.0.3\",\n    \"next\": \"^14.0.3\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"tsparticles\": \"^3.0.2\",\n    \"typescript\": \"^5.3.3\"\n  }\n}\n"
  },
  {
    "path": "apps/nextjs-beta/pages/api/hello.ts",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\nimport type { NextApiRequest, NextApiResponse } from 'next'\n\ntype Data = {\n  name: string\n}\n\nexport default function handler(\n  req: NextApiRequest,\n  res: NextApiResponse<Data>\n) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "apps/nextjs-beta/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ]\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "apps/react/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "apps/react/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07)\n\n\n### Bug Fixes\n\n* **deps:** update dependency @testing-library/jest-dom to v6 ([ba7f6c0](https://github.com/tsparticles/react/commit/ba7f6c08f5373eaf83838ba579c4a755353ac6b4))\n* fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a))\n\n\n### Features\n\n* added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3))\n\n\n\n\n\n## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11)\n\n**Note:** Version bump only for package react-demo\n\n\n\n\n\n## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)\n\n**Note:** Version bump only for package react-demo\n\n\n\n\n\n# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)\n\n\n### Bug Fixes\n\n* **deps:** update dependency @testing-library/react to v14 ([107b5c9](https://github.com/tsparticles/react/commit/107b5c9c76478bb6eb0ae9d1873f62beefc423a9))\n* **deps:** update dependency @testing-library/user-event to v14 ([62043e2](https://github.com/tsparticles/react/commit/62043e22da2caefcbccc1dfa563aa01a2f6769b4))\n* **deps:** update dependency web-vitals to v3 ([d3b48dc](https://github.com/tsparticles/react/commit/d3b48dcf6927778903314696c3b6b351d4eaed4f))\n"
  },
  {
    "path": "apps/react/README.md",
    "content": "# Getting Started with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe page will reload when you make changes.\\\nYou may also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can't go back!**\n\nIf you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.\n\nYou don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)\n\n### Analyzing the Bundle Size\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)\n\n### Making a Progressive Web App\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)\n\n### Advanced Configuration\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `npm run build` fails to minify\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)\n"
  },
  {
    "path": "apps/react/package.json",
    "content": "{\n  \"name\": \"react-demo\",\n  \"version\": \"3.0.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@tsparticles/engine\": \"^3.0.2\",\n    \"@tsparticles/react\": \"workspace:^\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-scripts\": \"^5.0.1\",\n    \"tsparticles\": \"^3.0.2\",\n    \"web-vitals\": \"^3.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"build:ci\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "apps/react/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-react-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%/logo192.png\" />\n    <!--\n      manifest.json provides metadata used when your web app is installed on a\n      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\n    -->\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n    <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n    <title>React App</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  </body>\n</html>\n"
  },
  {
    "path": "apps/react/public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "apps/react/public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "apps/react/src/App.css",
    "content": ".App {\n  text-align: center;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .App-logo {\n    animation: App-logo-spin infinite 20s linear;\n  }\n}\n\n.App-header {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: red;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.theme-btn {\n\n}\n"
  },
  {
    "path": "apps/react/src/App.js",
    "content": "import Particles, { initParticlesEngine } from \"@tsparticles/react\";\nimport { loadFull } from \"tsparticles\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./App.css\";\n\nfunction App() {\n    const containerRef = useRef(null), [ init, setInit ] = useState(false);\n\n    useEffect(() => {\n        if (init) {\n            return;\n        }\n\n        initParticlesEngine(async (engine) => {\n            await loadFull(engine);\n        }).then(() => {\n            setInit(true);\n        });\n    }, [ init ]);\n\n    const particlesLoaded = useCallback(\n            (container) => {\n                containerRef.current = container;\n\n                window.particlesContainer = container;\n            },\n            [ containerRef ]\n        ),\n        options = useMemo(\n            () => ({\n                fullScreen: {\n                    zIndex: -1,\n                },\n                particles: {\n                    number: {\n                        value: 100,\n                    },\n                    links: {\n                        enable: true,\n                    },\n                    move: {\n                        enable: true,\n                    },\n                },\n                themes: [\n                    {\n                        name: \"light\",\n                        default: {\n                            value: true,\n                            auto: true,\n                            mode: \"light\",\n                        },\n                        options: {\n                            background: {\n                                color: \"#ffffff\",\n                            },\n                            particles: {\n                                color: {\n                                    value: \"#000000\",\n                                },\n                                links: {\n                                    color: \"#000000\",\n                                },\n                            },\n                        },\n                    },\n                    {\n                        name: \"dark\",\n                        default: {\n                            value: true,\n                            auto: true,\n                            mode: \"dark\",\n                        },\n                        options: {\n                            background: {\n                                color: \"#000000\",\n                            },\n                            particles: {\n                                color: {\n                                    value: \"#ffffff\",\n                                },\n                                links: {\n                                    color: \"#ffffff\",\n                                },\n                            },\n                        },\n                    },\n                ],\n            }),\n            []\n        ),\n        lightTheme = () => {\n            containerRef.current?.loadTheme(\"light\");\n        },\n        darkTheme = () => {\n            containerRef.current?.loadTheme(\"dark\");\n        };\n\n    return (\n        <div className=\"App\">\n            <header className=\"App-header\">\n                <img src={logo} className=\"App-logo\" alt=\"logo\"/>\n                <p>\n                    Edit <code>src/App.js</code> and save to reload.\n                </p>\n                <a\n                    className=\"App-link\"\n                    href=\"https://reactjs.org\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    Learn React\n                </a>\n                <button className=\"theme-btn\" onClick={lightTheme}>\n                    Light\n                </button>\n                <button className=\"theme-btn\" onClick={darkTheme}>\n                    Dark\n                </button>\n            </header>\n            {init && (\n                <Particles\n                    id=\"tsparticles\"\n                    particlesLoaded={particlesLoaded}\n                    options={options}\n                />\n            )}\n        </div>\n    );\n}\n\nexport default App;\n"
  },
  {
    "path": "apps/react/src/App.test.js",
    "content": "import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  render(<App />);\n  const linkElement = screen.getByText(/learn react/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "apps/react/src/index.css",
    "content": "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n"
  },
  {
    "path": "apps/react/src/index.js",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"
  },
  {
    "path": "apps/react/src/reportWebVitals.js",
    "content": "const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n"
  },
  {
    "path": "apps/react/src/setupTests.js",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom';\n"
  },
  {
    "path": "components/react/.eslintrc.cjs",
    "content": "module.exports = {\n  root: true,\n  env: { browser: true, es2020: true },\n  extends: [\n    'eslint:recommended',\n    'plugin:@typescript-eslint/recommended',\n    'plugin:react-hooks/recommended',\n  ],\n  ignorePatterns: ['dist', '.eslintrc.cjs'],\n  parser: '@typescript-eslint/parser',\n  plugins: ['react-refresh'],\n  rules: {\n    'react-refresh/only-export-components': [\n      'warn',\n      { allowConstantExport: true },\n    ],\n  },\n}\n"
  },
  {
    "path": "components/react/.gitignore",
    "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "components/react/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07)\n\n\n### Bug Fixes\n\n* fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a))\n\n\n### Features\n\n* added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3))\n* converted component to hooks API, closes [#49](https://github.com/tsparticles/react/issues/49) ([4a9eaa0](https://github.com/tsparticles/react/commit/4a9eaa018052e244ed217446e8b56cb8dfc582ed))\n"
  },
  {
    "path": "components/react/README.md",
    "content": "[![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&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>\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = (container) => {\n    console.log(container);\n  };\n\n  const options = useMemo(\n    () => ({\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      <Particles\n        id=\"tsparticles\"\n        particlesLoaded={particlesLoaded}\n        options={options}\n      />\n    );\n  }\n\n  return <></>;\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = async (container?: Container): Promise<void> => {\n    console.log(container);\n  };\n\n  const options: ISourceOptions = useMemo(\n    () => ({\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      <Particles\n        id=\"tsparticles\"\n        particlesLoaded={particlesLoaded}\n        options={options}\n      />\n    );\n  }\n\n  return <></>;\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = (container) => {\n    console.log(container);\n  };\n\n  if (init) {\n    return (\n      <Particles\n        id=\"tsparticles\"\n        url=\"http://foo.bar/particles.json\"\n        particlesLoaded={particlesLoaded}\n      />\n    );\n  }\n\n  return <></>;\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 = () => {\n  const [init, setInit] = useState(false);\n\n  // this should be run only once per application lifetime\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\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(() => {\n      setInit(true);\n    });\n  }, []);\n\n  const particlesLoaded = (container?: Container) => {\n    console.log(container);\n  };\n\n  if (init) {\n    return (\n      <Particles\n        id=\"tsparticles\"\n        url=\"http://foo.bar/particles.json\"\n        particlesLoaded={particlesLoaded}\n      />\n    );\n  }\n\n  return <></>;\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"
  },
  {
    "path": "components/react/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite + React + TS</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/src/main.tsx\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "components/react/lib/IParticlesProps.ts",
    "content": "import type { Container, ISourceOptions } from \"@tsparticles/engine\";\nimport type { CSSProperties } from \"react\";\n\nexport interface IParticlesProps {\n  id?: string;\n  options?: ISourceOptions;\n  url?: string;\n  style?: CSSProperties;\n  className?: string;\n  particlesLoaded?: (container?: Container) => Promise<void>;\n}\n"
  },
  {
    "path": "components/react/lib/Particles.tsx",
    "content": "import { FC, useEffect } from \"react\";\nimport type { IParticlesProps } from \"./IParticlesProps\";\nimport { tsParticles, type Container } from \"@tsparticles/engine\";\n\nconst Particles: FC<IParticlesProps> = (props) => {\n  const id = props.id ?? \"tsparticles\";\n\n  useEffect(() => {\n    let container: Container | undefined;\n\n    tsParticles\n      .load({ id, url: props.url, options: props.options })\n      .then((c) => {\n        container = c;\n\n        props.particlesLoaded?.(c);\n      });\n\n    return () => {\n      container?.destroy();\n    };\n  }, [id, props, props.url, props.options]);\n\n  return <div id={id} className={props.className}></div>;\n};\n\nexport default Particles;\n"
  },
  {
    "path": "components/react/lib/index.ts",
    "content": "import { Engine, tsParticles } from \"@tsparticles/engine\";\nimport Particles from \"./Particles\";\n\nexport type { IParticlesProps } from \"./IParticlesProps\";\n\nexport async function initParticlesEngine(\n  cb: (engine: Engine) => Promise<void>,\n): Promise<void> {\n  await cb(tsParticles);\n}\n\nexport default Particles;\nexport { Particles };\n"
  },
  {
    "path": "components/react/package.json",
    "content": "{\n  \"name\": \"@tsparticles/react\",\n  \"version\": \"3.0.0\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"prettier --write README.md && pnpm run prettify && tsc && vite build\",\n    \"build:ci\": \"prettier --check README.md && pnpm run prettify:ci && tsc && vite build\",\n    \"lint\": \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\",\n    \"preview\": \"vite preview\",\n    \"prettify\": \"prettier --write \\\"src/**/*.{ts,tsx}\\\" && prettier --write \\\"lib/**/*.{ts,tsx}\\\"\",\n    \"prettify:ci\": \"prettier --check \\\"src/**/*.{ts,tsx}\\\" && prettier --check \\\"lib/**/*.{ts,tsx}\\\"\",\n    \"prepublishOnly\": \"pnpm run build\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"license\": \"MIT\",\n  \"peerDependencies\": {\n    \"@tsparticles/engine\": \"^3.0.2\",\n    \"react\": \">=16.8.0\",\n    \"react-dom\": \">=16.8.0\"\n  },\n  \"devDependencies\": {\n    \"@tsparticles/engine\": \"^3.0.2\",\n    \"@types/react\": \"^18.2.45\",\n    \"@types/react-dom\": \"^18.2.18\",\n    \"@typescript-eslint/eslint-plugin\": \"^7.0.0\",\n    \"@typescript-eslint/parser\": \"^7.0.0\",\n    \"@vitejs/plugin-react\": \"^4.2.1\",\n    \"eslint\": \"^8.56.0\",\n    \"eslint-plugin-react-hooks\": \"^4.6.0\",\n    \"eslint-plugin-react-refresh\": \"^0.4.5\",\n    \"glob\": \"^10.3.10\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"typescript\": \"^5.3.3\",\n    \"vite\": \"^5.0.10\",\n    \"vite-plugin-dts\": \"^3.6.4\",\n    \"vite-plugin-lib-inject-css\": \"^2.0.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "components/react/src/App.css",
    "content": "#root {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 2rem;\n  text-align: center;\n}\n\n.logo {\n  height: 6em;\n  padding: 1.5em;\n  will-change: filter;\n  transition: filter 300ms;\n}\n.logo:hover {\n  filter: drop-shadow(0 0 2em #646cffaa);\n}\n.logo.react:hover {\n  filter: drop-shadow(0 0 2em #61dafbaa);\n}\n\n@keyframes logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  a:nth-of-type(2) .logo {\n    animation: logo-spin infinite 20s linear;\n  }\n}\n\n.card {\n  padding: 2em;\n}\n\n.read-the-docs {\n  color: #888;\n}\n"
  },
  {
    "path": "components/react/src/App.tsx",
    "content": "import { useState } from \"react\";\nimport reactLogo from \"./assets/react.svg\";\nimport viteLogo from \"/vite.svg\";\nimport \"./App.css\";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <>\n      <div>\n        <a href=\"https://vitejs.dev\" target=\"_blank\">\n          <img src={viteLogo} className=\"logo\" alt=\"Vite logo\" />\n        </a>\n        <a href=\"https://react.dev\" target=\"_blank\">\n          <img src={reactLogo} className=\"logo react\" alt=\"React logo\" />\n        </a>\n      </div>\n      <h1>Vite + React</h1>\n      <div className=\"card\">\n        <button onClick={() => setCount((count) => count + 1)}>\n          count is {count}\n        </button>\n        <p>\n          Edit <code>src/App.tsx</code> and save to test HMR\n        </p>\n      </div>\n      <p className=\"read-the-docs\">\n        Click on the Vite and React logos to learn more\n      </p>\n    </>\n  );\n}\n\nexport default App;\n"
  },
  {
    "path": "components/react/src/index.css",
    "content": ":root {\n  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n  line-height: 1.5;\n  font-weight: 400;\n\n  color-scheme: light dark;\n  color: rgba(255, 255, 255, 0.87);\n  background-color: #242424;\n\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n}\n\na {\n  font-weight: 500;\n  color: #646cff;\n  text-decoration: inherit;\n}\na:hover {\n  color: #535bf2;\n}\n\nbody {\n  margin: 0;\n  display: flex;\n  place-items: center;\n  min-width: 320px;\n  min-height: 100vh;\n}\n\nh1 {\n  font-size: 3.2em;\n  line-height: 1.1;\n}\n\nbutton {\n  border-radius: 8px;\n  border: 1px solid transparent;\n  padding: 0.6em 1.2em;\n  font-size: 1em;\n  font-weight: 500;\n  font-family: inherit;\n  background-color: #1a1a1a;\n  cursor: pointer;\n  transition: border-color 0.25s;\n}\nbutton:hover {\n  border-color: #646cff;\n}\nbutton:focus,\nbutton:focus-visible {\n  outline: 4px auto -webkit-focus-ring-color;\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n    color: #213547;\n    background-color: #ffffff;\n  }\n  a:hover {\n    color: #747bff;\n  }\n  button {\n    background-color: #f9f9f9;\n  }\n}\n"
  },
  {
    "path": "components/react/src/main.tsx",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport \"./index.css\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n);\n"
  },
  {
    "path": "components/react/src/vite-env.d.ts",
    "content": "/// <reference types=\"vite/client\" />\n"
  },
  {
    "path": "components/react/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"useDefineForClassFields\": true,\n    \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"skipLibCheck\": true,\n\n    /* Bundler mode */\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\",\n\n    /* Linting */\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true\n  },\n  \"include\": [\"src\", \"lib\"],\n  \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n"
  },
  {
    "path": "components/react/tsconfig.node.json",
    "content": "{\n  \"compilerOptions\": {\n    \"composite\": true,\n    \"skipLibCheck\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"allowSyntheticDefaultImports\": true\n  },\n  \"include\": [\"vite.config.ts\"]\n}\n"
  },
  {
    "path": "components/react/vite.config.ts",
    "content": "import { defineConfig } from \"vite\";\nimport { extname, relative, resolve } from \"path\";\nimport { fileURLToPath } from \"node:url\";\nimport { glob } from \"glob\";\nimport react from \"@vitejs/plugin-react\";\nimport dts from \"vite-plugin-dts\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react(), dts({ include: [\"lib\"] })],\n  build: {\n    rollupOptions: {\n      external: [\"react\", \"react/jsx-runtime\", \"@tsparticles/engine\"],\n      input: Object.fromEntries(\n        glob.sync(\"lib/**/*.{ts,tsx}\").map((file) => [\n          // The name of the entry point\n          // lib/nested/foo.ts becomes nested/foo\n          relative(\"lib\", file.slice(0, file.length - extname(file).length)),\n          // The absolute path to the entry file\n          // lib/nested/foo.ts becomes /project/lib/nested/foo.ts\n          fileURLToPath(new URL(file, import.meta.url)),\n        ])\n      ),\n      output: {\n        assetFileNames: \"assets/[name][extname]\",\n        entryFileNames: \"[name].js\",\n      },\n    },\n    lib: {\n      entry: resolve(__dirname, \"lib/index.ts\"),\n      formats: [\"es\"],\n    },\n    copyPublicDir: false,\n  },\n});\n"
  },
  {
    "path": "lerna.json",
    "content": "{\n  \"$schema\": \"node_modules/lerna/schemas/lerna-schema.json\",\n  \"packages\": [\n    \"apps/*\",\n    \"components/*\",\n    \"templates/*\"\n  ],\n  \"version\": \"3.0.0\",\n  \"npmClient\": \"pnpm\",\n  \"conventionalCommits\": true,\n  \"command\": {\n    \"version\": {\n      \"message\": \"chore(release): published new version\"\n    }\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@tsparticles/react-workspace\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"prettier --write README.md && lerna run build\",\n    \"build:ci\": \"prettier --check README.md && lerna run build:ci\"\n  },\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@commitlint/cli\": \"^18.4.3\",\n    \"@commitlint/config-conventional\": \"^18.4.3\",\n    \"husky\": \"^9.0.0\",\n    \"lerna\": \"^8.0.1\",\n    \"prettier\": \"^3.1.1\",\n    \"process\": \"^0.11.10\",\n    \"react-error-overlay\": \"^6.0.11\"\n  },\n  \"workspaces\": [\n    \"apps/*\",\n    \"components/*\",\n    \"templates/*\"\n  ]\n}\n"
  },
  {
    "path": "pnpm-workspace.yaml",
    "content": "packages:\n  - 'apps/*'\n  - 'components/*'\n  - 'templates/*'"
  },
  {
    "path": "renovate.json",
    "content": "{\n  \"$schema\": \"https://docs.renovatebot.com/renovate-schema.json\",\n  \"extends\": [\n    \"config:base\"\n  ]\n}\n"
  },
  {
    "path": "templates/react/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07)\n\n\n### Bug Fixes\n\n* fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a))\n\n\n### Features\n\n* added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3))\n\n\n\n\n\n## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11)\n\n**Note:** Version bump only for package cra-template-particles\n\n\n\n\n\n## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)\n\n**Note:** Version bump only for package cra-template-particles\n\n\n\n\n\n# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)\n\n**Note:** Version bump only for package cra-template-particles\n\n\n\n\n\n# [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14)\n\n**Note:** Version bump only for package cra-template-particles\n\n\n\n\n\n## 2.10.1 (2023-06-04)\n\n\n### Features\n\n* updated templates to React 18 ([d9ae354](https://github.com/tsparticles/react/commit/d9ae354d71f245e85009c96007bd59df7bd422c8))\n\n\n\n\n\n## [2.9.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.9.2...cra-template-particles@2.9.3) (2023-02-12)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.9.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.9.1...cra-template-particles@2.9.2) (2023-02-12)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.9.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.9.0...cra-template-particles@2.9.1) (2023-02-11)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.9.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.8.0...cra-template-particles@2.9.0) (2023-02-10)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.8.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.7.1...cra-template-particles@2.8.0) (2023-01-18)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.7.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.7.0...cra-template-particles@2.7.1) (2022-12-25)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.7.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.6.0...cra-template-particles@2.7.0) (2022-12-23)\n\n### Features\n\n-   improved density values, now is 1:1 with number on 1080 resolution with pixel ratio of 1 ([3ff8fbf](https://github.com/tsparticles/tsparticles/commit/3ff8fbfefb01f1d6fe8be836c3c2909b74630475))\n\n# [2.6.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.3...cra-template-particles@2.6.0) (2022-12-06)\n\n### Bug Fixes\n\n-   **deps:** update dependency fs-extra to v11 ([e82352a](https://github.com/tsparticles/tsparticles/commit/e82352a685960603a58fb222f91d157ee65967de))\n\n## [2.5.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.2...cra-template-particles@2.5.3) (2022-11-07)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.5.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.1...cra-template-particles@2.5.2) (2022-11-07)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.5.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.0...cra-template-particles@2.5.1) (2022-11-03)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.5.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.4.0...cra-template-particles@2.5.0) (2022-11-02)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.4.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.4...cra-template-particles@2.4.0) (2022-10-30)\n\n### Features\n\n-   removed all canvas context save/restore calls ([208722f](https://github.com/tsparticles/tsparticles/commit/208722f0a521246165b7cdc529dfbfbd7a3cf7eb))\n\n## [2.3.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.3...cra-template-particles@2.3.4) (2022-09-30)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.3.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.2...cra-template-particles@2.3.3) (2022-09-30)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.3.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.1...cra-template-particles@2.3.2) (2022-09-21)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.3.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.0...cra-template-particles@2.3.1) (2022-09-13)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.3.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.4...cra-template-particles@2.3.0) (2022-09-11)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.2.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.2...cra-template-particles@2.2.4) (2022-08-26)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.2.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.2...cra-template-particles@2.2.3) (2022-08-21)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.2.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.1...cra-template-particles@2.2.2) (2022-08-16)\n\n### Bug Fixes\n\n-   fixed double mouse events on mobile using pointer events, closes [#4622](https://github.com/tsparticles/tsparticles/issues/4622) ([1019fa4](https://github.com/tsparticles/tsparticles/commit/1019fa431f8a43cbd45d6adeb5adf94433e6e04b))\n\n## [2.2.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.0...cra-template-particles@2.2.1) (2022-08-12)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.2.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.4...cra-template-particles@2.2.0) (2022-08-11)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.1.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.3...cra-template-particles@2.1.4) (2022-07-28)\n\n### Features\n\n-   preparing @tsparticles/react and switching alternate packages ([49e749e](https://github.com/tsparticles/tsparticles/commit/49e749e90e076f0cb22eefe0f3399102f5b9fb35))\n\n## [2.1.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.2...cra-template-particles@2.1.3) (2022-07-01)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.1.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.1...cra-template-particles@2.1.2) (2022-07-01)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.1.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.0...cra-template-particles@2.1.1) (2022-07-01)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.1.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.6...cra-template-particles@2.1.0) (2022-06-18)\n\n### Bug Fixes\n\n-   **deps:** update dependency @capacitor/core to v3.5.0 ([581bb7e](https://github.com/tsparticles/tsparticles/commit/581bb7e2f4f6aceb3535daf9223954a80f2daa81))\n\n## [2.0.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.5...cra-template-particles@2.0.6) (2022-04-16)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.0.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.4...cra-template-particles@2.0.5) (2022-04-14)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.0.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.43.1...cra-template-particles@2.0.4) (2022-04-06)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [2.0.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.1...cra-template-particles@2.0.3) (2022-03-11)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [2.0.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.4...cra-template-particles@2.0.2) (2022-02-21)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [1.43.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.43.0...cra-template-particles@1.43.1) (2022-04-06)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.43.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.4...cra-template-particles@1.43.0) (2022-04-04)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.42.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.3...cra-template-particles@1.42.4) (2022-03-20)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.42.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.2...cra-template-particles@1.42.3) (2022-03-18)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.42.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.1...cra-template-particles@1.42.2) (2022-03-14)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.42.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.0...cra-template-particles@1.42.1) (2022-03-09)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.42.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.6...cra-template-particles@1.42.0) (2022-03-08)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [2.0.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.0...cra-template-particles@2.0.1) (2022-02-15)\n\n## [1.41.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.5...cra-template-particles@1.41.6) (2022-03-03)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.41.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.4...cra-template-particles@1.41.5) (2022-02-24)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.41.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.3...cra-template-particles@1.41.4) (2022-02-20)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.41.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.2...cra-template-particles@1.41.3) (2022-02-19)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.41.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.1...cra-template-particles@1.41.2) (2022-02-16)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.0.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.1...cra-template-particles@2.0.0) (2022-02-15)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n# [2.0.0-beta.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.2...cra-template-particles@2.0.0-beta.5) (2022-01-30)\n\n## [1.41.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.0...cra-template-particles@1.41.1) (2022-02-14)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.41.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.40.2...cra-template-particles@1.41.0) (2022-02-10)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.40.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.40.1...cra-template-particles@1.40.2) (2022-02-07)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.40.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.40.0...cra-template-particles@1.40.1) (2022-02-06)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.40.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.3...cra-template-particles@1.40.0) (2022-02-04)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.22.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.2...cra-template-particles@1.22.3) (2022-02-02)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n-   updated fpsLimit default value to 120 build: updated all presets to have a fpsLimit of 120 ([d1eff05](https://github.com/tsparticles/tsparticles/commit/d1eff050224c4d65727c0abc3f100d70d3807eb8))\n\n# [2.0.0-beta.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.0-beta.3...cra-template-particles@2.0.0-beta.4) (2021-12-07)\n\n## [1.22.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.1...cra-template-particles@1.22.2) (2022-01-29)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.22.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.0...cra-template-particles@1.22.1) (2022-01-26)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.22.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.21.0...cra-template-particles@1.22.0) (2022-01-08)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.21.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.6...cra-template-particles@1.21.0) (2021-12-29)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.20.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.5...cra-template-particles@1.20.6) (2021-12-24)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.0.0-beta.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.5...cra-template-particles@2.0.0-beta.3) (2021-12-04)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n# [2.0.0-beta.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.4...cra-template-particles@2.0.0-beta.2) (2021-10-06)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n# [2.0.0-beta.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.0-beta.0...cra-template-particles@2.0.0-beta.1) (2021-10-06)\n\n## [1.20.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.4...cra-template-particles@1.20.5) (2021-11-28)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.20.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.3...cra-template-particles@1.20.4) (2021-11-17)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.20.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.2...cra-template-particles@1.20.3) (2021-11-05)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.20.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.1...cra-template-particles@1.20.2) (2021-10-31)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.20.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.0...cra-template-particles@1.20.1) (2021-10-30)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.20.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.19.0...cra-template-particles@1.20.0) (2021-10-28)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.19.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.4...cra-template-particles@1.19.0) (2021-10-14)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.18.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.3...cra-template-particles@1.18.4) (2021-10-06)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [2.0.0-beta.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.3...cra-template-particles@2.0.0-beta.0) (2021-10-06)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [1.18.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.2...cra-template-particles@1.18.3) (2021-10-03)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.18.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.1...cra-template-particles@1.18.2) (2021-09-27)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.18.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.0...cra-template-particles@1.18.1) (2021-09-20)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.18.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.17.1...cra-template-particles@1.18.0) (2021-09-18)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.17.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.17.0...cra-template-particles@1.17.1) (2021-09-15)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.17.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.3...cra-template-particles@1.17.0) (2021-08-23)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.16.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.2...cra-template-particles@1.16.3) (2021-08-10)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.16.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.1...cra-template-particles@1.16.2) (2021-07-31)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.16.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.0...cra-template-particles@1.16.1) (2021-07-29)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.16.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.15.0...cra-template-particles@1.16.0) (2021-07-29)\n\n**Note:** Version bump only for package cra-template-particles\n\n## [1.1.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0...cra-template-particles@1.1.1) (2020-10-06)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-beta.6...cra-template-particles@1.1.0) (2020-10-05)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-beta.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-beta.5...cra-template-particles@1.1.0-beta.6) (2020-10-04)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-beta.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-beta.4...cra-template-particles@1.1.0-beta.5) (2020-10-04)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-beta.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-beta.3...cra-template-particles@1.1.0-beta.4) (2020-10-03)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-beta.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-beta.2...cra-template-particles@1.1.0-beta.3) (2020-10-03)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-beta.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-beta.1...cra-template-particles@1.1.0-beta.2) (2020-10-03)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-beta.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-beta.0...cra-template-particles@1.1.0-beta.1) (2020-10-02)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-beta.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.0.12...cra-template-particles@1.1.0-beta.0) (2020-10-02)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.14](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.0.9...cra-template-particles@1.1.0-alpha.14) (2020-08-22)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.13](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.12...cra-template-particles@1.1.0-alpha.13) (2020-08-17)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.12](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.0.8...cra-template-particles@1.1.0-alpha.12) (2020-08-16)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.11](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.10...cra-template-particles@1.1.0-alpha.11) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.10](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.9...cra-template-particles@1.1.0-alpha.10) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.9](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.8...cra-template-particles@1.1.0-alpha.9) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.8](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.7...cra-template-particles@1.1.0-alpha.8) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.7](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.6...cra-template-particles@1.1.0-alpha.7) (2020-08-12)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.5...cra-template-particles@1.1.0-alpha.6) (2020-08-11)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.4...cra-template-particles@1.1.0-alpha.5) (2020-08-11)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.3...cra-template-particles@1.1.0-alpha.4) (2020-08-11)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.2...cra-template-particles@1.1.0-alpha.3) (2020-08-10)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0-alpha.1...cra-template-particles@1.1.0-alpha.2) (2020-08-09)\n\n**Note:** Version bump only for package cra-template-particles\n\n# [1.1.0-alpha.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.0.7...cra-template-particles@1.1.0-alpha.1) (2020-08-08)\n\n**Note:** Version bump only for package cra-template-particles\n"
  },
  {
    "path": "templates/react/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Matteo Bruni\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "templates/react/README.md",
    "content": "[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# cra-template-particles\n\nThis is the official template for [React tsParticles](https://github.com/tsparticles/tsparticles) [Create React App](https://github.com/facebook/create-react-app).\n\nIf you don't specify a template (for example, `--template particles`), this template will be used by default.\n\nFor example:\n\n```sh\nnpx create-react-app my-app --template particles\n\n# or\n\nyarn create react-app my-app --template particles\n```\n\nFor more information, please refer to:\n\n- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.\n- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.\n- [Particles Guide](https://github.com/tsparticles/tsparticles) - How to customize tsParticles options.\n- [Particles Demo](https://particles.js.org) - tsParticles demo website.\n"
  },
  {
    "path": "templates/react/package.json",
    "content": "{\n  \"name\": \"cra-template-particles\",\n  \"version\": \"3.0.0\",\n  \"description\": \"Official React tsParticles template\",\n  \"keywords\": [\n    \"front-end\",\n    \"frontend\",\n    \"tsparticles\",\n    \"particles.js\",\n    \"particlesjs\",\n    \"particles\",\n    \"particle\",\n    \"canvas\",\n    \"jsparticles\",\n    \"xparticles\",\n    \"particles-js\",\n    \"particles-bg\",\n    \"particles-bg-vue\",\n    \"particles-ts\",\n    \"particles.ts\",\n    \"react-particles-js\",\n    \"react-particles.js\",\n    \"react-particles\",\n    \"react\",\n    \"reactjs\",\n    \"vue-particles\",\n    \"ngx-particles\",\n    \"angular-particles\",\n    \"particleground\",\n    \"vue\",\n    \"vuejs\",\n    \"preact\",\n    \"preactjs\",\n    \"jquery\",\n    \"angularjs\",\n    \"angular\",\n    \"typescript\",\n    \"javascript\",\n    \"animation\",\n    \"web\",\n    \"html5\",\n    \"web-design\",\n    \"webdesign\",\n    \"css\",\n    \"html\",\n    \"css3\",\n    \"animated\",\n    \"background\",\n    \"confetti\",\n    \"canvas\",\n    \"fireworks\",\n    \"fireworks-js\",\n    \"confetti-js\",\n    \"confettijs\",\n    \"fireworksjs\",\n    \"canvas-confetti\"\n  ],\n  \"author\": \"Matteo Bruni <matteo.bruni@me.com>\",\n  \"homepage\": \"https://particles.js.org\",\n  \"license\": \"MIT\",\n  \"main\": \"template.json\",\n  \"files\": [\n    \"template\",\n    \"template.json\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/tsparticles/react.git\",\n    \"directory\": \"templates/react\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/tsparticles/react/issues\"\n  },\n  \"funding\": [\n    {\n      \"type\": \"github\",\n      \"url\": \"https://github.com/sponsors/matteobruni\"\n    },\n    {\n      \"type\": \"github\",\n      \"url\": \"https://github.com/sponsors/tsparticles\"\n    },\n    {\n      \"type\": \"buymeacoffee\",\n      \"url\": \"https://www.buymeacoffee.com/matteobruni\"\n    }\n  ],\n  \"dependencies\": {\n    \"@tsparticles/engine\": \"^3.0.2\",\n    \"@tsparticles/react\": \"^3.0.0\",\n    \"tslib\": \"^2.6.2\",\n    \"tsparticles\": \"^3.0.2\"\n  },\n  \"devDependencies\": {\n    \"fs-extra\": \"^11.2.0\"\n  },\n  \"scripts\": {\n    \"build\": \"node scripts/prebuild.js\",\n    \"build:ci\": \"node scripts/prebuild.js\",\n    \"version\": \"pnpm run build && git add ./template.json\",\n    \"prepack\": \"pnpm run build\"\n  }\n}\n"
  },
  {
    "path": "templates/react/scripts/prebuild.js",
    "content": "const fs = require('fs-extra');\nconst mainPackage = require('../package.json');\nconst libPackage = './template.json';\n\nfs.readFile(libPackage, function (error, data) {\n    if (error) {\n        throw error;\n    }\n\n    const text = data.toString();\n\n    const libObj = JSON.parse(text);\n\n    console.log(libObj);\n\n    libObj.package.dependencies[\"@tsparticles/react\"] = mainPackage.dependencies[\"@tsparticles/react\"].replace(\"workspace:\", \"\");\n    libObj.package.dependencies[\"tsparticles\"] = mainPackage.dependencies[\"tsparticles\"].replace(\"workspace:\", \"\");\n    libObj.package.dependencies[\"@tsparticles/engine\"] = mainPackage.dependencies[\"@tsparticles/engine\"].replace(\"workspace:\", \"\");\n\n    fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), 'utf-8', function () {\n        console.log(`template.json dependencies updated successfully`);\n    });\n});\n"
  },
  {
    "path": "templates/react/template/README.md",
    "content": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.<br />\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.<br />\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.<br />\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.<br />\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.<br />\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\n\n### Analyzing the Bundle Size\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\n\n### Making a Progressive Web App\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\n\n### Advanced Configuration\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\n\n### Deployment\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\n\n### `npm run build` fails to minify\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify"
  },
  {
    "path": "templates/react/template/gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*"
  },
  {
    "path": "templates/react/template/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-react-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%/logo192.png\" />\n    <!--\n      manifest.json provides metadata used when your web app is installed on a\n      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\n    -->\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n    <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n    <title>React App</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  </body>\n</html>\n"
  },
  {
    "path": "templates/react/template/public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "templates/react/template/public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "templates/react/template/src/App.css",
    "content": ".App {\n    text-align: center;\n}\n\n.App-logo {\n    height: 40vmin;\n    pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n    .App-logo {\n        animation: App-logo-spin infinite 20s linear;\n    }\n}\n\n.App-header {\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(10px + 2vmin);\n    color: white;\n}\n\n.App-link {\n    color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n#tsparticles {\n    position: fixed;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    left: 0;\n    top: 0;\n    z-index: -1;\n}\n"
  },
  {
    "path": "templates/react/template/src/App.js",
    "content": "import React, {useEffect, useState} from \"react\";\nimport Particles, {initParticlesEngine} from \"@tsparticles/react\";\nimport {loadFull} from \"tsparticles\";\nimport logo from \"./logo.svg\";\nimport \"./App.css\";\nimport particlesOptions from \"./particles.json\";\n\nfunction App() {\n    const [init, setInit] = useState(false);\n\n    useEffect(() => {\n        if (init) {\n            return;\n        }\n\n        initParticlesEngine(async (engine) => {\n            await loadFull(engine);\n        }).then(() => {\n            setInit(true);\n        });\n    }, []);\n\n    return (\n        <div className=\"App\">\n            {init && <Particles options={particlesOptions}/>}\n            <header className=\"App-header\">\n                <img src={logo} className=\"App-logo\" alt=\"logo\"/>\n                <p>\n                    Edit <code>src/App.js</code> and save to reload.\n                </p>\n                <p>\n                    Edit <code>src/particles.json</code> to customize Particles, then save\n                    to reload.\n                </p>\n                <a\n                    className=\"App-link\"\n                    href=\"https://reactjs.org\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    Learn React\n                </a>\n                <a\n                    className=\"App-link\"\n                    href=\"https://particles.js.org\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    See Particles samples\n                </a>\n            </header>\n        </div>\n    );\n}\n\nexport default App;\n"
  },
  {
    "path": "templates/react/template/src/App.test.js",
    "content": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  const { getByText } = render(<App />);\n  const linkElement = getByText(/learn react/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "templates/react/template/src/index.css",
    "content": "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n"
  },
  {
    "path": "templates/react/template/src/index.js",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\n\nroot.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"
  },
  {
    "path": "templates/react/template/src/particles.json",
    "content": "{\n  \"background\": {\n    \"color\": \"#282c34\"\n  },\n  \"interactivity\": {\n    \"events\": {\n      \"onClick\": {\n        \"enable\": true,\n        \"mode\": \"push\"\n      },\n      \"onHover\": {\n        \"enable\": true,\n        \"mode\": \"repulse\"\n      },\n      \"resize\": true\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    \"collisions\": {\n      \"enable\": true\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      \"random\": true,\n      \"value\": 5\n    }\n  }\n}\n"
  },
  {
    "path": "templates/react/template/src/serviceWorker.js",
    "content": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n"
  },
  {
    "path": "templates/react/template/src/setupTests.js",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom/extend-expect';\n"
  },
  {
    "path": "templates/react/template.json",
    "content": "{\n  \"package\": {\n    \"dependencies\": {\n      \"@tsparticles/react\": \"^3.0.0\",\n      \"@tsparticles/engine\": \"^3.0.2\",\n      \"tsparticles\": \"^3.0.2\",\n      \"tslib\": \"^2.6.2\"\n    }\n  }\n}"
  },
  {
    "path": "templates/react-ts/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07)\n\n\n### Bug Fixes\n\n* **deps:** update dependency @testing-library/jest-dom to v6 ([ba7f6c0](https://github.com/tsparticles/react/commit/ba7f6c08f5373eaf83838ba579c4a755353ac6b4))\n* fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a))\n\n\n### Features\n\n* added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3))\n\n\n\n\n\n## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n\n\n\n\n## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n\n\n\n\n# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n\n\n\n\n# [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n\n\n\n\n## 2.10.1 (2023-06-04)\n\n\n### Features\n\n* updated templates to React 18 ([d9ae354](https://github.com/tsparticles/react/commit/d9ae354d71f245e85009c96007bd59df7bd422c8))\n\n\n\n\n\n## [2.9.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.9.2...cra-template-particles-typescript@2.9.3) (2023-02-12)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.9.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.9.1...cra-template-particles-typescript@2.9.2) (2023-02-12)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.9.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.9.0...cra-template-particles-typescript@2.9.1) (2023-02-11)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.9.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.8.0...cra-template-particles-typescript@2.9.0) (2023-02-10)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.8.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.7.1...cra-template-particles-typescript@2.8.0) (2023-01-18)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.7.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.7.0...cra-template-particles-typescript@2.7.1) (2022-12-25)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.7.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.6.0...cra-template-particles-typescript@2.7.0) (2022-12-23)\n\n### Features\n\n-   improved density values, now is 1:1 with number on 1080 resolution with pixel ratio of 1 ([3ff8fbf](https://github.com/tsparticles/tsparticles/commit/3ff8fbfefb01f1d6fe8be836c3c2909b74630475))\n\n# [2.6.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.5.3...cra-template-particles-typescript@2.6.0) (2022-12-06)\n\n### Bug Fixes\n\n-   **deps:** update dependency fs-extra to v11 ([e82352a](https://github.com/tsparticles/tsparticles/commit/e82352a685960603a58fb222f91d157ee65967de))\n\n## [2.5.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.5.2...cra-template-particles-typescript@2.5.3) (2022-11-07)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.5.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.5.1...cra-template-particles-typescript@2.5.2) (2022-11-07)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.5.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.5.0...cra-template-particles-typescript@2.5.1) (2022-11-03)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.5.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.4.0...cra-template-particles-typescript@2.5.0) (2022-11-02)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.4.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.3.4...cra-template-particles-typescript@2.4.0) (2022-10-30)\n\n### Features\n\n-   removed all canvas context save/restore calls ([208722f](https://github.com/tsparticles/tsparticles/commit/208722f0a521246165b7cdc529dfbfbd7a3cf7eb))\n\n## [2.3.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.3.3...cra-template-particles-typescript@2.3.4) (2022-09-30)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.3.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.3.2...cra-template-particles-typescript@2.3.3) (2022-09-30)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.3.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.3.1...cra-template-particles-typescript@2.3.2) (2022-09-21)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.3.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.3.0...cra-template-particles-typescript@2.3.1) (2022-09-13)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.3.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.2.4...cra-template-particles-typescript@2.3.0) (2022-09-11)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.2.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.2.2...cra-template-particles-typescript@2.2.4) (2022-08-26)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.2.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.2.2...cra-template-particles-typescript@2.2.3) (2022-08-21)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.2.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.2.1...cra-template-particles-typescript@2.2.2) (2022-08-16)\n\n### Bug Fixes\n\n-   fixed double mouse events on mobile using pointer events, closes [#4622](https://github.com/tsparticles/tsparticles/issues/4622) ([1019fa4](https://github.com/tsparticles/tsparticles/commit/1019fa431f8a43cbd45d6adeb5adf94433e6e04b))\n\n## [2.2.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.2.0...cra-template-particles-typescript@2.2.1) (2022-08-12)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.2.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.1.4...cra-template-particles-typescript@2.2.0) (2022-08-11)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.1.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.1.3...cra-template-particles-typescript@2.1.4) (2022-07-28)\n\n### Features\n\n-   preparing @tsparticles/react and switching alternate packages ([49e749e](https://github.com/tsparticles/tsparticles/commit/49e749e90e076f0cb22eefe0f3399102f5b9fb35))\n\n## [2.1.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.1.2...cra-template-particles-typescript@2.1.3) (2022-07-01)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.1.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.1.1...cra-template-particles-typescript@2.1.2) (2022-07-01)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.1.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.1.0...cra-template-particles-typescript@2.1.1) (2022-07-01)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.1.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.0.6...cra-template-particles-typescript@2.1.0) (2022-06-18)\n\n### Bug Fixes\n\n-   **deps:** update dependency @capacitor/core to v3.5.0 ([581bb7e](https://github.com/tsparticles/tsparticles/commit/581bb7e2f4f6aceb3535daf9223954a80f2daa81))\n-   fixed react-tsparticles typescript template ([04a4d10](https://github.com/tsparticles/tsparticles/commit/04a4d100b97bd5828d7346c7277c5b47bd8f9208))\n\n## [2.0.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.0.5...cra-template-particles-typescript@2.0.6) (2022-04-16)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.0.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.0.4...cra-template-particles-typescript@2.0.5) (2022-04-14)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.0.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.43.1...cra-template-particles-typescript@2.0.4) (2022-04-06)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [2.0.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.42.1...cra-template-particles-typescript@2.0.3) (2022-03-11)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [2.0.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.4...cra-template-particles-typescript@2.0.2) (2022-02-21)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [1.43.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.43.0...cra-template-particles-typescript@1.43.1) (2022-04-06)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.43.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.42.4...cra-template-particles-typescript@1.43.0) (2022-04-04)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.42.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.42.3...cra-template-particles-typescript@1.42.4) (2022-03-20)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.42.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.42.2...cra-template-particles-typescript@1.42.3) (2022-03-18)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.42.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.42.1...cra-template-particles-typescript@1.42.2) (2022-03-14)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.42.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.42.0...cra-template-particles-typescript@1.42.1) (2022-03-09)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.42.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.6...cra-template-particles-typescript@1.42.0) (2022-03-08)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [2.0.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.0.0...cra-template-particles-typescript@2.0.1) (2022-02-15)\n\n## [1.41.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.5...cra-template-particles-typescript@1.41.6) (2022-03-03)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.41.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.4...cra-template-particles-typescript@1.41.5) (2022-02-24)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.41.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.3...cra-template-particles-typescript@1.41.4) (2022-02-20)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.41.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.2...cra-template-particles-typescript@1.41.3) (2022-02-19)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.41.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.1...cra-template-particles-typescript@1.41.2) (2022-02-16)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.0.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.1...cra-template-particles-typescript@2.0.0) (2022-02-15)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n# [2.0.0-beta.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.22.2...cra-template-particles-typescript@2.0.0-beta.5) (2022-01-30)\n\n## [1.41.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.41.0...cra-template-particles-typescript@1.41.1) (2022-02-14)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.41.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.40.2...cra-template-particles-typescript@1.41.0) (2022-02-10)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.40.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.40.1...cra-template-particles-typescript@1.40.2) (2022-02-07)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.40.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.40.0...cra-template-particles-typescript@1.40.1) (2022-02-06)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.40.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.22.3...cra-template-particles-typescript@1.40.0) (2022-02-04)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.22.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.22.2...cra-template-particles-typescript@1.22.3) (2022-02-02)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n-   updated fpsLimit default value to 120 build: updated all presets to have a fpsLimit of 120 ([d1eff05](https://github.com/tsparticles/tsparticles/commit/d1eff050224c4d65727c0abc3f100d70d3807eb8))\n\n# [2.0.0-beta.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.0.0-beta.3...cra-template-particles-typescript@2.0.0-beta.4) (2021-12-07)\n\n## [1.22.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.22.1...cra-template-particles-typescript@1.22.2) (2022-01-29)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.22.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.22.0...cra-template-particles-typescript@1.22.1) (2022-01-26)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.22.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.21.0...cra-template-particles-typescript@1.22.0) (2022-01-08)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.21.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.6...cra-template-particles-typescript@1.21.0) (2021-12-29)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.20.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.5...cra-template-particles-typescript@1.20.6) (2021-12-24)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.0.0-beta.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.5...cra-template-particles-typescript@2.0.0-beta.3) (2021-12-04)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n# [2.0.0-beta.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.18.4...cra-template-particles-typescript@2.0.0-beta.2) (2021-10-06)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n# [2.0.0-beta.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@2.0.0-beta.0...cra-template-particles-typescript@2.0.0-beta.1) (2021-10-06)\n\n## [1.20.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.4...cra-template-particles-typescript@1.20.5) (2021-11-28)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.20.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.3...cra-template-particles-typescript@1.20.4) (2021-11-17)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.20.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.2...cra-template-particles-typescript@1.20.3) (2021-11-05)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.20.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.1...cra-template-particles-typescript@1.20.2) (2021-10-31)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.20.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.20.0...cra-template-particles-typescript@1.20.1) (2021-10-30)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.20.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.19.0...cra-template-particles-typescript@1.20.0) (2021-10-28)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.19.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.18.4...cra-template-particles-typescript@1.19.0) (2021-10-14)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.18.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.18.3...cra-template-particles-typescript@1.18.4) (2021-10-06)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [2.0.0-beta.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.18.3...cra-template-particles-typescript@2.0.0-beta.0) (2021-10-06)\n\n### Features\n\n-   splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777))\n\n## [1.18.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.18.2...cra-template-particles-typescript@1.18.3) (2021-10-03)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.18.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.18.1...cra-template-particles-typescript@1.18.2) (2021-09-27)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.18.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.18.0...cra-template-particles-typescript@1.18.1) (2021-09-20)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.18.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.17.1...cra-template-particles-typescript@1.18.0) (2021-09-18)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.17.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.17.0...cra-template-particles-typescript@1.17.1) (2021-09-15)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.17.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.16.3...cra-template-particles-typescript@1.17.0) (2021-08-23)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.16.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.16.2...cra-template-particles-typescript@1.16.3) (2021-08-10)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.16.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.16.1...cra-template-particles-typescript@1.16.2) (2021-07-31)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.16.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.16.0...cra-template-particles-typescript@1.16.1) (2021-07-29)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.16.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.15.0...cra-template-particles-typescript@1.16.0) (2021-07-29)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n## [1.1.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0...cra-template-particles-typescript@1.1.1) (2020-10-06)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-beta.6...cra-template-particles-typescript@1.1.0) (2020-10-05)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-beta.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-beta.5...cra-template-particles-typescript@1.1.0-beta.6) (2020-10-04)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-beta.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-beta.4...cra-template-particles-typescript@1.1.0-beta.5) (2020-10-04)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-beta.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-beta.3...cra-template-particles-typescript@1.1.0-beta.4) (2020-10-03)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-beta.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-beta.2...cra-template-particles-typescript@1.1.0-beta.3) (2020-10-03)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-beta.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-beta.1...cra-template-particles-typescript@1.1.0-beta.2) (2020-10-03)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-beta.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-beta.0...cra-template-particles-typescript@1.1.0-beta.1) (2020-10-02)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-beta.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.0.12...cra-template-particles-typescript@1.1.0-beta.0) (2020-10-02)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.14](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.0.9...cra-template-particles-typescript@1.1.0-alpha.14) (2020-08-22)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.13](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.12...cra-template-particles-typescript@1.1.0-alpha.13) (2020-08-17)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.12](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.0.8...cra-template-particles-typescript@1.1.0-alpha.12) (2020-08-16)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.11](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.10...cra-template-particles-typescript@1.1.0-alpha.11) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.10](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.9...cra-template-particles-typescript@1.1.0-alpha.10) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.9](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.8...cra-template-particles-typescript@1.1.0-alpha.9) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.8](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.7...cra-template-particles-typescript@1.1.0-alpha.8) (2020-08-13)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.7](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.6...cra-template-particles-typescript@1.1.0-alpha.7) (2020-08-12)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.5...cra-template-particles-typescript@1.1.0-alpha.6) (2020-08-11)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.4...cra-template-particles-typescript@1.1.0-alpha.5) (2020-08-11)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.3...cra-template-particles-typescript@1.1.0-alpha.4) (2020-08-11)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.2...cra-template-particles-typescript@1.1.0-alpha.3) (2020-08-10)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.1.0-alpha.1...cra-template-particles-typescript@1.1.0-alpha.2) (2020-08-09)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n\n# [1.1.0-alpha.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles-typescript@1.0.7...cra-template-particles-typescript@1.1.0-alpha.1) (2020-08-08)\n\n**Note:** Version bump only for package cra-template-particles-typescript\n"
  },
  {
    "path": "templates/react-ts/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Matteo Bruni\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "templates/react-ts/README.md",
    "content": "[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# cra-template-particles-typescript\n\nThis is the official TypeScript template for [React tsParticles](https://github.com/tsparticles/tsparticles) with [Create React App](https://github.com/facebook/create-react-app).\n\nTo use this template, add `--template particles-typescript` when creating a new app.\n\nFor example:\n\n```sh\nnpx create-react-app my-app --template particles-typescript\n\n# or\n\nyarn create react-app my-app --template particles-typescript\n```\n\nFor more information, please refer to:\n\n- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.\n- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.\n- [Particles Guide](https://github.com/tsparticles/tsparticles) - How to customize tsParticles options.\n- [Particles Demo](https://particles.js.org) - tsParticles demo website.\n"
  },
  {
    "path": "templates/react-ts/package.json",
    "content": "{\n  \"name\": \"cra-template-particles-typescript\",\n  \"version\": \"3.0.0\",\n  \"description\": \"Official TypeScript React tsParticles template\",\n  \"keywords\": [\n    \"front-end\",\n    \"frontend\",\n    \"tsparticles\",\n    \"particles.js\",\n    \"particlesjs\",\n    \"particles\",\n    \"particle\",\n    \"canvas\",\n    \"jsparticles\",\n    \"xparticles\",\n    \"particles-js\",\n    \"particles-bg\",\n    \"particles-bg-vue\",\n    \"particles-ts\",\n    \"particles.ts\",\n    \"react-particles-js\",\n    \"react-particles.js\",\n    \"react-particles\",\n    \"react\",\n    \"reactjs\",\n    \"vue-particles\",\n    \"ngx-particles\",\n    \"angular-particles\",\n    \"particleground\",\n    \"vue\",\n    \"vuejs\",\n    \"preact\",\n    \"preactjs\",\n    \"jquery\",\n    \"angularjs\",\n    \"angular\",\n    \"typescript\",\n    \"javascript\",\n    \"animation\",\n    \"web\",\n    \"html5\",\n    \"web-design\",\n    \"webdesign\",\n    \"css\",\n    \"html\",\n    \"css3\",\n    \"animated\",\n    \"background\",\n    \"confetti\",\n    \"canvas\",\n    \"fireworks\",\n    \"fireworks-js\",\n    \"confetti-js\",\n    \"confettijs\",\n    \"fireworksjs\",\n    \"canvas-confetti\"\n  ],\n  \"author\": \"Matteo Bruni <matteo.bruni@me.com>\",\n  \"homepage\": \"https://particles.js.org\",\n  \"license\": \"MIT\",\n  \"main\": \"template.json\",\n  \"files\": [\n    \"template\",\n    \"template.json\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/tsparticles/react.git\",\n    \"directory\": \"templates/react-ts\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/tsparticles/react/issues\"\n  },\n  \"funding\": [\n    {\n      \"type\": \"github\",\n      \"url\": \"https://github.com/sponsors/matteobruni\"\n    },\n    {\n      \"type\": \"github\",\n      \"url\": \"https://github.com/sponsors/tsparticles\"\n    },\n    {\n      \"type\": \"buymeacoffee\",\n      \"url\": \"https://www.buymeacoffee.com/matteobruni\"\n    }\n  ],\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^6.1.5\",\n    \"@testing-library/react\": \"^14.1.2\",\n    \"@testing-library/user-event\": \"^14.5.1\",\n    \"@tsparticles/engine\": \"^3.0.2\",\n    \"@tsparticles/react\": \"^3.0.0\",\n    \"@types/jest\": \"^29.5.10\",\n    \"@types/node\": \"^20.10.3\",\n    \"@types/react\": \"^18.2.42\",\n    \"@types/react-dom\": \"^18.2.17\",\n    \"tslib\": \"^2.6.2\",\n    \"tsparticles\": \"^3.0.2\",\n    \"typescript\": \"^5.3.3\",\n    \"web-vitals\": \"^3.5.0\"\n  },\n  \"devDependencies\": {\n    \"fs-extra\": \"^11.2.0\"\n  },\n  \"scripts\": {\n    \"build\": \"node scripts/prebuild.js\",\n    \"build:ci\": \"node scripts/prebuild.js\",\n    \"version\": \"pnpm run build && git add ./template.json\",\n    \"prepack\": \"pnpm run build\"\n  }\n}\n"
  },
  {
    "path": "templates/react-ts/scripts/prebuild.js",
    "content": "const fs = require('fs-extra');\nconst mainPackage = require('../package.json');\nconst libPackage = './template.json';\n\nfs.readFile(libPackage, function (error, data) {\n    if (error) {\n        throw error;\n    }\n\n    const text = data.toString();\n\n    const libObj = JSON.parse(text);\n\n    console.log(libObj);\n\n    libObj.package.dependencies[\"@tsparticles/react\"] = mainPackage.dependencies[\"@tsparticles/react\"].replace(\"workspace:\", \"\");\n    libObj.package.dependencies[\"tsparticles\"] = mainPackage.dependencies[\"tsparticles\"].replace(\"workspace:\", \"\");\n    libObj.package.dependencies[\"@tsparticles/engine\"] = mainPackage.dependencies[\"@tsparticles/engine\"].replace(\"workspace:\", \"\");\n\n    fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), 'utf-8', function () {\n        console.log(`template.json dependencies updated successfully`);\n    });\n});\n"
  },
  {
    "path": "templates/react-ts/template/README.md",
    "content": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.<br />\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.<br />\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.<br />\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.<br />\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.<br />\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/)."
  },
  {
    "path": "templates/react-ts/template/gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*"
  },
  {
    "path": "templates/react-ts/template/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-react-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%/logo192.png\" />\n    <!--\n      manifest.json provides metadata used when your web app is installed on a\n      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\n    -->\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n    <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n    <title>React App</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  </body>\n</html>\n"
  },
  {
    "path": "templates/react-ts/template/public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "templates/react-ts/template/public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "templates/react-ts/template/src/App.css",
    "content": ".App {\n    text-align: center;\n}\n\n.App-logo {\n    height: 40vmin;\n    pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n    .App-logo {\n        animation: App-logo-spin infinite 20s linear;\n    }\n}\n\n.App-header {\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(10px + 2vmin);\n    color: white;\n}\n\n.App-link {\n    color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n#tsparticles {\n    position: fixed;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    left: 0;\n    top: 0;\n    z-index: -1;\n}\n"
  },
  {
    "path": "templates/react-ts/template/src/App.test.tsx",
    "content": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n    render(<App/>);\n    const linkElement = screen.getByText(/learn react/i);\n    expect(linkElement).toBeInTheDocument();\n});"
  },
  {
    "path": "templates/react-ts/template/src/App.tsx",
    "content": "import React, { useCallback, useEffect, useState } from \"react\";\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\nimport type { Engine } from \"@tsparticles/engine\";\nimport { loadFull } from \"tsparticles\";\nimport logo from \"./logo.svg\";\nimport \"./App.css\";\nimport particlesOptions from \"./particles.json\";\nimport { ISourceOptions } from \"@tsparticles/engine\";\n\nfunction App() {\n    const [ init, setInit ] = useState(false);\n\n    useEffect(() => {\n        initParticlesEngine(async (engine) => {\n            await loadFull(engine);\n        }).then(() => {\n            setInit(true);\n        });\n    }, []);\n\n    return (\n        <div className=\"App\">\n            {init && (\n                <Particles\n                    options={particlesOptions as ISourceOptions}\n                />\n            )}\n            <header className=\"App-header\">\n                <img src={logo} className=\"App-logo\" alt=\"logo\"/>\n                <p>\n                    Edit <code>src/App.tsx</code> and save to reload.\n                </p>\n                <p>\n                    Edit <code>src/particles.json</code> to customize Particles, then save\n                    to reload.\n                </p>\n                <a\n                    className=\"App-link\"\n                    href=\"https://reactjs.org\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    Learn React\n                </a>\n                <a\n                    className=\"App-link\"\n                    href=\"https://particles.js.org\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    See Particles samples\n                </a>\n            </header>\n        </div>\n    );\n}\n\nexport default App;\n"
  },
  {
    "path": "templates/react-ts/template/src/index.css",
    "content": "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n"
  },
  {
    "path": "templates/react-ts/template/src/index.tsx",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport * as serviceWorker from \"./serviceWorker\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\") as HTMLElement);\n\nroot.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorker.unregister();\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"
  },
  {
    "path": "templates/react-ts/template/src/particles.json",
    "content": "{\n  \"background\": {\n    \"color\": \"#282c34\"\n  },\n  \"interactivity\": {\n    \"events\": {\n      \"onClick\": {\n        \"enable\": true,\n        \"mode\": \"push\"\n      },\n      \"onHover\": {\n        \"enable\": true,\n        \"mode\": \"repulse\"\n      },\n      \"resize\": true\n    },\n    \"modes\": {\n      \"bubble\": {\n        \"distance\": 400,\n        \"duration\": 2,\n        \"opacity\": 0.8,\n        \"size\": 40\n      },\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    \"collisions\": {\n      \"enable\": true\n    },\n    \"move\": {\n      \"direction\": \"none\",\n      \"enable\": true,\n      \"outMode\": \"bounce\",\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      \"random\": true,\n      \"value\": 5\n    }\n  }\n}\n"
  },
  {
    "path": "templates/react-ts/template/src/reportWebVitals.ts",
    "content": "import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n    if (onPerfEntry && onPerfEntry instanceof Function) {\n        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n            getCLS(onPerfEntry);\n            getFID(onPerfEntry);\n            getFCP(onPerfEntry);\n            getLCP(onPerfEntry);\n            getTTFB(onPerfEntry);\n        });\n    }\n}\n\nexport default reportWebVitals;"
  },
  {
    "path": "templates/react-ts/template/src/serviceWorker.ts",
    "content": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://cra.link/PWA\n\nconst isLocalhost = Boolean(\n    window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n        /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\ntype Config = {\n  onSuccess?: (registration: ServiceWorkerRegistration) => void;\n  onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(\n        process.env.PUBLIC_URL,\n        window.location.href\n    );\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n              'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://cra.link/PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n  navigator.serviceWorker\n      .register(swUrl)\n      .then(registration => {\n        registration.onupdatefound = () => {\n          const installingWorker = registration.installing;\n          if (installingWorker == null) {\n            return;\n          }\n          installingWorker.onstatechange = () => {\n            if (installingWorker.state === 'installed') {\n              if (navigator.serviceWorker.controller) {\n                // At this point, the updated precached content has been fetched,\n                // but the previous service worker will still serve the older\n                // content until all client tabs are closed.\n                console.log(\n                    'New content is available and will be used when all ' +\n                    'tabs for this page are closed. See https://cra.link/PWA.'\n                );\n\n                // Execute callback\n                if (config && config.onUpdate) {\n                  config.onUpdate(registration);\n                }\n              } else {\n                // At this point, everything has been precached.\n                // It's the perfect time to display a\n                // \"Content is cached for offline use.\" message.\n                console.log('Content is cached for offline use.');\n\n                // Execute callback\n                if (config && config.onSuccess) {\n                  config.onSuccess(registration);\n                }\n              }\n            }\n          };\n        };\n      })\n      .catch(error => {\n        console.error('Error during service worker registration:', error);\n      });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' }\n  })\n      .then(response => {\n        // Ensure service worker exists, and that we really are getting a JS file.\n        const contentType = response.headers.get('content-type');\n        if (\n            response.status === 404 ||\n            (contentType != null && contentType.indexOf('javascript') === -1)\n        ) {\n          // No service worker found. Probably a different app. Reload the page.\n          navigator.serviceWorker.ready.then(registration => {\n            registration.unregister().then(() => {\n              window.location.reload();\n            });\n          });\n        } else {\n          // Service worker found. Proceed as normal.\n          registerValidSW(swUrl, config);\n        }\n      })\n      .catch(() => {\n        console.log(\n            'No internet connection found. App is running in offline mode.'\n        );\n      });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n        .then(registration => {\n          registration.unregister();\n        })\n        .catch(error => {\n          console.error(error.message);\n        });\n  }\n}"
  },
  {
    "path": "templates/react-ts/template/src/setupTests.ts",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom';"
  },
  {
    "path": "templates/react-ts/template/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"esnext\",\n    \"importHelpers\": true,\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": false,\n    \"noEmit\": true,\n    \"jsx\": \"react\"\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n"
  },
  {
    "path": "templates/react-ts/template.json",
    "content": "{\n  \"package\": {\n    \"dependencies\": {\n      \"@testing-library/jest-dom\": \"^6.1.5\",\n      \"@testing-library/react\": \"^14.1.2\",\n      \"@testing-library/user-event\": \"^14.4.3\",\n      \"@types/node\": \"^20.10.3\",\n      \"@types/react\": \"^18.2.42\",\n      \"@types/react-dom\": \"^18.2.17\",\n      \"@types/jest\": \"^29.5.10\",\n      \"@tsparticles/react\": \"^3.0.0\",\n      \"@tsparticles/engine\": \"^3.0.2\",\n      \"tslib\": \"^2.6.2\",\n      \"typescript\": \"^5.3.2\",\n      \"web-vitals\": \"^3.4.0\",\n      \"tsparticles\": \"^3.0.2\"\n    }\n  }\n}"
  }
]