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