├── .husky ├── .gitignore └── commit-msg ├── apps ├── nextjs │ ├── .eslintrc.json │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ ├── next.config.js │ ├── pages │ │ ├── _app.js │ │ ├── api │ │ │ └── hello.js │ │ └── index.js │ ├── styles │ │ ├── globals.css │ │ └── Home.module.css │ ├── .gitignore │ ├── package.json │ ├── README.md │ └── CHANGELOG.md ├── nextjs-beta │ ├── .eslintrc.json │ ├── public │ │ ├── favicon.ico │ │ ├── vercel.svg │ │ ├── thirteen.svg │ │ └── next.svg │ ├── next.config.js │ ├── app │ │ ├── particles.tsx │ │ ├── head.tsx │ │ ├── layout.tsx │ │ ├── globals.css │ │ ├── page.tsx │ │ └── page.module.css │ ├── pages │ │ └── api │ │ │ └── hello.ts │ ├── .gitignore │ ├── tsconfig.json │ ├── package.json │ ├── README.md │ └── CHANGELOG.md └── react │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html │ ├── src │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.css │ ├── logo.svg │ └── App.js │ ├── .gitignore │ ├── package.json │ ├── CHANGELOG.md │ └── README.md ├── components └── react │ ├── src │ ├── vite-env.d.ts │ ├── main.tsx │ ├── App.css │ ├── App.tsx │ ├── index.css │ └── assets │ │ └── react.svg │ ├── tsconfig.node.json │ ├── .gitignore │ ├── lib │ ├── IParticlesProps.ts │ ├── index.ts │ └── Particles.tsx │ ├── index.html │ ├── .eslintrc.cjs │ ├── tsconfig.json │ ├── CHANGELOG.md │ ├── vite.config.ts │ ├── public │ └── vite.svg │ ├── package.json │ └── README.md ├── pnpm-workspace.yaml ├── .github ├── FUNDING.yml └── workflows │ └── nodejs.yml ├── templates ├── react │ ├── template │ │ ├── public │ │ │ ├── robots.txt │ │ │ ├── favicon.ico │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── index.html │ │ ├── src │ │ │ ├── setupTests.js │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── App.css │ │ │ ├── particles.json │ │ │ ├── App.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ ├── gitignore │ │ └── README.md │ ├── template.json │ ├── scripts │ │ └── prebuild.js │ ├── README.md │ ├── LICENSE │ ├── package.json │ └── CHANGELOG.md └── react-ts │ ├── template │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── src │ │ ├── setupTests.ts │ │ ├── App.test.tsx │ │ ├── index.css │ │ ├── reportWebVitals.ts │ │ ├── index.tsx │ │ ├── App.css │ │ ├── particles.json │ │ ├── App.tsx │ │ ├── logo.svg │ │ └── serviceWorker.ts │ ├── gitignore │ ├── tsconfig.json │ └── README.md │ ├── template.json │ ├── scripts │ └── prebuild.js │ ├── README.md │ ├── LICENSE │ └── package.json ├── renovate.json ├── lerna.json ├── package.json ├── LICENSE ├── CHANGELOG.md ├── .gitignore └── README.md /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ -------------------------------------------------------------------------------- /apps/nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /components/react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /apps/nextjs-beta/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'components/*' 4 | - 'templates/*' -------------------------------------------------------------------------------- /apps/react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: matteobruni,tsparticles 4 | -------------------------------------------------------------------------------- /apps/nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/apps/nextjs/public/favicon.ico -------------------------------------------------------------------------------- /apps/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/apps/react/public/favicon.ico -------------------------------------------------------------------------------- /apps/react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/apps/react/public/logo192.png -------------------------------------------------------------------------------- /apps/react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/apps/react/public/logo512.png -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit "" 5 | -------------------------------------------------------------------------------- /apps/nextjs-beta/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/apps/nextjs-beta/public/favicon.ico -------------------------------------------------------------------------------- /templates/react/template/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /templates/react-ts/template/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /templates/react/template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/templates/react/template/public/favicon.ico -------------------------------------------------------------------------------- /templates/react/template/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/templates/react/template/public/logo192.png -------------------------------------------------------------------------------- /templates/react/template/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/templates/react/template/public/logo512.png -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /templates/react-ts/template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/templates/react-ts/template/public/favicon.ico -------------------------------------------------------------------------------- /templates/react-ts/template/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/templates/react-ts/template/public/logo192.png -------------------------------------------------------------------------------- /templates/react-ts/template/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/react/HEAD/templates/react-ts/template/public/logo512.png -------------------------------------------------------------------------------- /apps/nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /apps/nextjs/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /apps/nextjs-beta/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | experimental: { 4 | appDir: true, 5 | }, 6 | } 7 | 8 | module.exports = nextConfig 9 | -------------------------------------------------------------------------------- /apps/nextjs/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /templates/react/template.json: -------------------------------------------------------------------------------- 1 | { 2 | "package": { 3 | "dependencies": { 4 | "@tsparticles/react": "^3.0.0", 5 | "@tsparticles/engine": "^3.0.2", 6 | "tsparticles": "^3.0.2", 7 | "tslib": "^2.6.2" 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /apps/react/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /components/react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; -------------------------------------------------------------------------------- /apps/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /templates/react/template/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /components/react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); -------------------------------------------------------------------------------- /apps/nextjs-beta/app/particles.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Particles from "@tsparticles/react"; 4 | import configs from "@tsparticles/configs"; 5 | 6 | export default function ParticlesComponent(props: { 7 | id: string; 8 | done: boolean; 9 | }) { 10 | return props.done && ; 11 | } 12 | -------------------------------------------------------------------------------- /templates/react/template/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /apps/nextjs-beta/app/head.tsx: -------------------------------------------------------------------------------- 1 | export default function Head() { 2 | return ( 3 | <> 4 | Create Next App 5 | 6 | 7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /components/react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /apps/nextjs-beta/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "node_modules/lerna/schemas/lerna-schema.json", 3 | "packages": [ 4 | "apps/*", 5 | "components/*", 6 | "templates/*" 7 | ], 8 | "version": "3.0.0", 9 | "npmClient": "pnpm", 10 | "conventionalCommits": true, 11 | "command": { 12 | "version": { 13 | "message": "chore(release): published new version" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /apps/nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | /*color: white;*/ 8 | } 9 | 10 | a { 11 | color: inherit; 12 | text-decoration: none; 13 | } 14 | 15 | * { 16 | box-sizing: border-box; 17 | } 18 | -------------------------------------------------------------------------------- /components/react/lib/IParticlesProps.ts: -------------------------------------------------------------------------------- 1 | import type { Container, ISourceOptions } from "@tsparticles/engine"; 2 | import type { CSSProperties } from "react"; 3 | 4 | export interface IParticlesProps { 5 | id?: string; 6 | options?: ISourceOptions; 7 | url?: string; 8 | style?: CSSProperties; 9 | className?: string; 10 | particlesLoaded?: (container?: Container) => Promise; 11 | } 12 | -------------------------------------------------------------------------------- /components/react/lib/index.ts: -------------------------------------------------------------------------------- 1 | import { Engine, tsParticles } from "@tsparticles/engine"; 2 | import Particles from "./Particles"; 3 | 4 | export type { IParticlesProps } from "./IParticlesProps"; 5 | 6 | export async function initParticlesEngine( 7 | cb: (engine: Engine) => Promise, 8 | ): Promise { 9 | await cb(tsParticles); 10 | } 11 | 12 | export default Particles; 13 | export { Particles }; 14 | -------------------------------------------------------------------------------- /apps/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /apps/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /templates/react-ts/template/gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* -------------------------------------------------------------------------------- /templates/react/template/gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* -------------------------------------------------------------------------------- /apps/react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /components/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/template/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /apps/nextjs-beta/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | 3 | export default function RootLayout({ 4 | children, 5 | }: { 6 | children: React.ReactNode; 7 | }) { 8 | return ( 9 | 10 | {/* 11 | will contain the components returned by the nearest parent 12 | head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head 13 | */} 14 | 15 | {children} 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /components/react/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | } 14 | 15 | export default reportWebVitals; -------------------------------------------------------------------------------- /apps/nextjs-beta/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /apps/nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | -------------------------------------------------------------------------------- /templates/react-ts/template.json: -------------------------------------------------------------------------------- 1 | { 2 | "package": { 3 | "dependencies": { 4 | "@testing-library/jest-dom": "^6.1.5", 5 | "@testing-library/react": "^14.1.2", 6 | "@testing-library/user-event": "^14.4.3", 7 | "@types/node": "^20.10.3", 8 | "@types/react": "^18.2.42", 9 | "@types/react-dom": "^18.2.17", 10 | "@types/jest": "^29.5.10", 11 | "@tsparticles/react": "^3.0.0", 12 | "@tsparticles/engine": "^3.0.2", 13 | "tslib": "^2.6.2", 14 | "typescript": "^5.3.2", 15 | "web-vitals": "^3.4.0", 16 | "tsparticles": "^3.0.2" 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /apps/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /apps/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /apps/nextjs-beta/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/react/template/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /templates/react-ts/template/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /templates/react/template/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | 15 | // If you want your app to work offline and load faster, you can change 16 | // unregister() to register() below. Note this comes with some pitfalls. 17 | // Learn more about service workers: https://bit.ly/CRA-PWA 18 | serviceWorker.unregister(); 19 | -------------------------------------------------------------------------------- /templates/react-ts/template/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "importHelpers": true, 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": false, 20 | "noEmit": true, 21 | "jsx": "react" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /apps/nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs", 3 | "version": "3.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "build:ci": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@tsparticles/engine": "^3.0.2", 14 | "@tsparticles/preset-big-circles": "^3.0.0", 15 | "@tsparticles/react": "workspace:^", 16 | "next": "^14.0.3", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "typescript": "^5.3.3" 20 | }, 21 | "devDependencies": { 22 | "eslint": "^8.55.0", 23 | "eslint-config-next": "^14.0.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tsparticles/react-workspace", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "prettier --write README.md && lerna run build", 7 | "build:ci": "prettier --check README.md && lerna run build:ci" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "@commitlint/cli": "^18.4.3", 12 | "@commitlint/config-conventional": "^18.4.3", 13 | "husky": "^9.0.0", 14 | "lerna": "^8.0.1", 15 | "prettier": "^3.1.1", 16 | "process": "^0.11.10", 17 | "react-error-overlay": "^6.0.11" 18 | }, 19 | "workspaces": [ 20 | "apps/*", 21 | "components/*", 22 | "templates/*" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /apps/nextjs-beta/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ] 22 | }, 23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 24 | "exclude": ["node_modules"] 25 | } 26 | -------------------------------------------------------------------------------- /components/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src", "lib"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /apps/react/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | min-height: 100vh; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | font-size: calc(10px + 2vmin); 23 | color: red; 24 | } 25 | 26 | .App-link { 27 | color: #61dafb; 28 | } 29 | 30 | @keyframes App-logo-spin { 31 | from { 32 | transform: rotate(0deg); 33 | } 34 | to { 35 | transform: rotate(360deg); 36 | } 37 | } 38 | 39 | .theme-btn { 40 | 41 | } 42 | -------------------------------------------------------------------------------- /components/react/lib/Particles.tsx: -------------------------------------------------------------------------------- 1 | import { FC, useEffect } from "react"; 2 | import type { IParticlesProps } from "./IParticlesProps"; 3 | import { tsParticles, type Container } from "@tsparticles/engine"; 4 | 5 | const Particles: FC = (props) => { 6 | const id = props.id ?? "tsparticles"; 7 | 8 | useEffect(() => { 9 | let container: Container | undefined; 10 | 11 | tsParticles 12 | .load({ id, url: props.url, options: props.options }) 13 | .then((c) => { 14 | container = c; 15 | 16 | props.particlesLoaded?.(c); 17 | }); 18 | 19 | return () => { 20 | container?.destroy(); 21 | }; 22 | }, [id, props, props.url, props.options]); 23 | 24 | return
; 25 | }; 26 | 27 | export default Particles; 28 | -------------------------------------------------------------------------------- /components/react/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /apps/nextjs-beta/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-beta-demo", 3 | "version": "3.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "build:ci": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@next/font": "^14.0.3", 14 | "@tsparticles/configs": "^3.0.2", 15 | "@tsparticles/engine": "^3.0.2", 16 | "@tsparticles/react": "workspace:^", 17 | "@types/node": "^20.10.4", 18 | "@types/react": "^18.2.42", 19 | "@types/react-dom": "^18.2.17", 20 | "eslint": "^8.55.0", 21 | "eslint-config-next": "^14.0.3", 22 | "next": "^14.0.3", 23 | "react": "^18.2.0", 24 | "react-dom": "^18.2.0", 25 | "tsparticles": "^3.0.2", 26 | "typescript": "^5.3.3" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /components/react/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a)) 12 | 13 | 14 | ### Features 15 | 16 | * added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3)) 17 | * converted component to hooks API, closes [#49](https://github.com/tsparticles/react/issues/49) ([4a9eaa0](https://github.com/tsparticles/react/commit/4a9eaa018052e244ed217446e8b56cb8dfc582ed)) 18 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | import reportWebVitals from "./reportWebVitals"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); 9 | 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want your app to work offline and load faster, you can change 17 | // unregister() to register() below. Note this comes with some pitfalls. 18 | // Learn more about service workers: https://cra.link/PWA 19 | serviceWorker.unregister(); 20 | 21 | // If you want to start measuring performance in your app, pass a function 22 | // to log results (for example: reportWebVitals(console.log)) 23 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 24 | reportWebVitals(); 25 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | min-height: 100vh; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | font-size: calc(10px + 2vmin); 23 | color: white; 24 | } 25 | 26 | .App-link { 27 | color: #61dafb; 28 | } 29 | 30 | @keyframes App-logo-spin { 31 | from { 32 | transform: rotate(0deg); 33 | } 34 | to { 35 | transform: rotate(360deg); 36 | } 37 | } 38 | 39 | #tsparticles { 40 | position: fixed; 41 | height: 100%; 42 | width: 100%; 43 | margin: 0; 44 | padding: 0; 45 | left: 0; 46 | top: 0; 47 | z-index: -1; 48 | } 49 | -------------------------------------------------------------------------------- /templates/react/template/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | min-height: 100vh; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | font-size: calc(10px + 2vmin); 23 | color: white; 24 | } 25 | 26 | .App-link { 27 | color: #61dafb; 28 | } 29 | 30 | @keyframes App-logo-spin { 31 | from { 32 | transform: rotate(0deg); 33 | } 34 | to { 35 | transform: rotate(360deg); 36 | } 37 | } 38 | 39 | #tsparticles { 40 | position: fixed; 41 | height: 100%; 42 | width: 100%; 43 | margin: 0; 44 | padding: 0; 45 | left: 0; 46 | top: 0; 47 | z-index: -1; 48 | } 49 | -------------------------------------------------------------------------------- /templates/react/scripts/prebuild.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra'); 2 | const mainPackage = require('../package.json'); 3 | const libPackage = './template.json'; 4 | 5 | fs.readFile(libPackage, function (error, data) { 6 | if (error) { 7 | throw error; 8 | } 9 | 10 | const text = data.toString(); 11 | 12 | const libObj = JSON.parse(text); 13 | 14 | console.log(libObj); 15 | 16 | libObj.package.dependencies["@tsparticles/react"] = mainPackage.dependencies["@tsparticles/react"].replace("workspace:", ""); 17 | libObj.package.dependencies["tsparticles"] = mainPackage.dependencies["tsparticles"].replace("workspace:", ""); 18 | libObj.package.dependencies["@tsparticles/engine"] = mainPackage.dependencies["@tsparticles/engine"].replace("workspace:", ""); 19 | 20 | fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), 'utf-8', function () { 21 | console.log(`template.json dependencies updated successfully`); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /templates/react-ts/scripts/prebuild.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra'); 2 | const mainPackage = require('../package.json'); 3 | const libPackage = './template.json'; 4 | 5 | fs.readFile(libPackage, function (error, data) { 6 | if (error) { 7 | throw error; 8 | } 9 | 10 | const text = data.toString(); 11 | 12 | const libObj = JSON.parse(text); 13 | 14 | console.log(libObj); 15 | 16 | libObj.package.dependencies["@tsparticles/react"] = mainPackage.dependencies["@tsparticles/react"].replace("workspace:", ""); 17 | libObj.package.dependencies["tsparticles"] = mainPackage.dependencies["tsparticles"].replace("workspace:", ""); 18 | libObj.package.dependencies["@tsparticles/engine"] = mainPackage.dependencies["@tsparticles/engine"].replace("workspace:", ""); 19 | 20 | fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), 'utf-8', function () { 21 | console.log(`template.json dependencies updated successfully`); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /apps/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-demo", 3 | "version": "3.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@tsparticles/engine": "^3.0.2", 7 | "@tsparticles/react": "workspace:^", 8 | "react": "^18.2.0", 9 | "react-dom": "^18.2.0", 10 | "react-scripts": "^5.0.1", 11 | "tsparticles": "^3.0.2", 12 | "web-vitals": "^3.5.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "build:ci": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /templates/react/README.md: -------------------------------------------------------------------------------- 1 | [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) 2 | 3 | # cra-template-particles 4 | 5 | This is the official template for [React tsParticles](https://github.com/tsparticles/tsparticles) [Create React App](https://github.com/facebook/create-react-app). 6 | 7 | If you don't specify a template (for example, `--template particles`), this template will be used by default. 8 | 9 | For example: 10 | 11 | ```sh 12 | npx create-react-app my-app --template particles 13 | 14 | # or 15 | 16 | yarn create react-app my-app --template particles 17 | ``` 18 | 19 | For more information, please refer to: 20 | 21 | - [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app. 22 | - [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App. 23 | - [Particles Guide](https://github.com/tsparticles/tsparticles) - How to customize tsParticles options. 24 | - [Particles Demo](https://particles.js.org) - tsParticles demo website. 25 | -------------------------------------------------------------------------------- /templates/react-ts/README.md: -------------------------------------------------------------------------------- 1 | [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) 2 | 3 | # cra-template-particles-typescript 4 | 5 | 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). 6 | 7 | To use this template, add `--template particles-typescript` when creating a new app. 8 | 9 | For example: 10 | 11 | ```sh 12 | npx create-react-app my-app --template particles-typescript 13 | 14 | # or 15 | 16 | yarn create react-app my-app --template particles-typescript 17 | ``` 18 | 19 | For more information, please refer to: 20 | 21 | - [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app. 22 | - [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App. 23 | - [Particles Guide](https://github.com/tsparticles/tsparticles) - How to customize tsParticles options. 24 | - [Particles Demo](https://particles.js.org) - tsParticles demo website. 25 | -------------------------------------------------------------------------------- /components/react/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import reactLogo from "./assets/react.svg"; 3 | import viteLogo from "/vite.svg"; 4 | import "./App.css"; 5 | 6 | function App() { 7 | const [count, setCount] = useState(0); 8 | 9 | return ( 10 | <> 11 | 19 |

Vite + React

20 |
21 | 24 |

25 | Edit src/App.tsx and save to test HMR 26 |

27 |
28 |

29 | Click on the Vite and React logos to learn more 30 |

31 | 32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /apps/nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /apps/nextjs-beta/public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Matteo Bruni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /templates/react/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Matteo Bruni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /templates/react-ts/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Matteo Bruni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { extname, relative, resolve } from "path"; 3 | import { fileURLToPath } from "node:url"; 4 | import { glob } from "glob"; 5 | import react from "@vitejs/plugin-react"; 6 | import dts from "vite-plugin-dts"; 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | plugins: [react(), dts({ include: ["lib"] })], 11 | build: { 12 | rollupOptions: { 13 | external: ["react", "react/jsx-runtime", "@tsparticles/engine"], 14 | input: Object.fromEntries( 15 | glob.sync("lib/**/*.{ts,tsx}").map((file) => [ 16 | // The name of the entry point 17 | // lib/nested/foo.ts becomes nested/foo 18 | relative("lib", file.slice(0, file.length - extname(file).length)), 19 | // The absolute path to the entry file 20 | // lib/nested/foo.ts becomes /project/lib/nested/foo.ts 21 | fileURLToPath(new URL(file, import.meta.url)), 22 | ]) 23 | ), 24 | output: { 25 | assetFileNames: "assets/[name][extname]", 26 | entryFileNames: "[name].js", 27 | }, 28 | }, 29 | lib: { 30 | entry: resolve(__dirname, "lib/index.ts"), 31 | formats: ["es"], 32 | }, 33 | copyPublicDir: false, 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /apps/nextjs-beta/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/react/template/src/particles.json: -------------------------------------------------------------------------------- 1 | { 2 | "background": { 3 | "color": "#282c34" 4 | }, 5 | "interactivity": { 6 | "events": { 7 | "onClick": { 8 | "enable": true, 9 | "mode": "push" 10 | }, 11 | "onHover": { 12 | "enable": true, 13 | "mode": "repulse" 14 | }, 15 | "resize": true 16 | }, 17 | "modes": { 18 | "push": { 19 | "quantity": 4 20 | }, 21 | "repulse": { 22 | "distance": 200, 23 | "duration": 0.4 24 | } 25 | } 26 | }, 27 | "particles": { 28 | "color": { 29 | "value": "#ffffff" 30 | }, 31 | "links": { 32 | "color": "#ffffff", 33 | "distance": 150, 34 | "enable": true, 35 | "opacity": 0.5, 36 | "width": 1 37 | }, 38 | "collisions": { 39 | "enable": true 40 | }, 41 | "move": { 42 | "direction": "none", 43 | "enable": true, 44 | "outModes": { 45 | "default": "bounce" 46 | }, 47 | "random": false, 48 | "speed": 6, 49 | "straight": false 50 | }, 51 | "number": { 52 | "density": { 53 | "enable": true 54 | }, 55 | "value": 80 56 | }, 57 | "opacity": { 58 | "value": 0.5 59 | }, 60 | "shape": { 61 | "type": "circle" 62 | }, 63 | "size": { 64 | "random": true, 65 | "value": 5 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /components/react/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/react/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | @media (prefers-color-scheme: light) { 59 | :root { 60 | color: #213547; 61 | background-color: #ffffff; 62 | } 63 | a:hover { 64 | color: #747bff; 65 | } 66 | button { 67 | background-color: #f9f9f9; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/particles.json: -------------------------------------------------------------------------------- 1 | { 2 | "background": { 3 | "color": "#282c34" 4 | }, 5 | "interactivity": { 6 | "events": { 7 | "onClick": { 8 | "enable": true, 9 | "mode": "push" 10 | }, 11 | "onHover": { 12 | "enable": true, 13 | "mode": "repulse" 14 | }, 15 | "resize": true 16 | }, 17 | "modes": { 18 | "bubble": { 19 | "distance": 400, 20 | "duration": 2, 21 | "opacity": 0.8, 22 | "size": 40 23 | }, 24 | "push": { 25 | "quantity": 4 26 | }, 27 | "repulse": { 28 | "distance": 200, 29 | "duration": 0.4 30 | } 31 | } 32 | }, 33 | "particles": { 34 | "color": { 35 | "value": "#ffffff" 36 | }, 37 | "links": { 38 | "color": "#ffffff", 39 | "distance": 150, 40 | "enable": true, 41 | "opacity": 0.5, 42 | "width": 1 43 | }, 44 | "collisions": { 45 | "enable": true 46 | }, 47 | "move": { 48 | "direction": "none", 49 | "enable": true, 50 | "outMode": "bounce", 51 | "random": false, 52 | "speed": 6, 53 | "straight": false 54 | }, 55 | "number": { 56 | "density": { 57 | "enable": true 58 | }, 59 | "value": 80 60 | }, 61 | "opacity": { 62 | "value": 0.5 63 | }, 64 | "shape": { 65 | "type": "circle" 66 | }, 67 | "size": { 68 | "random": true, 69 | "value": 5 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /apps/nextjs/README.md: -------------------------------------------------------------------------------- 1 | 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | pnpm run dev 9 | ``` 10 | 11 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 12 | 13 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 14 | 15 | [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`. 16 | 17 | 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. 18 | 19 | ## Learn More 20 | 21 | To learn more about Next.js, take a look at the following resources: 22 | 23 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 24 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 25 | 26 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 27 | 28 | ## Deploy on Vercel 29 | 30 | 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. 31 | 32 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 33 | -------------------------------------------------------------------------------- /components/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tsparticles/react", 3 | "version": "3.0.0", 4 | "type": "module", 5 | "main": "dist/index.js", 6 | "types": "dist/index.d.ts", 7 | "scripts": { 8 | "dev": "vite", 9 | "build": "prettier --write README.md && pnpm run prettify && tsc && vite build", 10 | "build:ci": "prettier --check README.md && pnpm run prettify:ci && tsc && vite build", 11 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 12 | "preview": "vite preview", 13 | "prettify": "prettier --write \"src/**/*.{ts,tsx}\" && prettier --write \"lib/**/*.{ts,tsx}\"", 14 | "prettify:ci": "prettier --check \"src/**/*.{ts,tsx}\" && prettier --check \"lib/**/*.{ts,tsx}\"", 15 | "prepublishOnly": "pnpm run build" 16 | }, 17 | "files": [ 18 | "dist" 19 | ], 20 | "license": "MIT", 21 | "peerDependencies": { 22 | "@tsparticles/engine": "^3.0.2", 23 | "react": ">=16.8.0", 24 | "react-dom": ">=16.8.0" 25 | }, 26 | "devDependencies": { 27 | "@tsparticles/engine": "^3.0.2", 28 | "@types/react": "^18.2.45", 29 | "@types/react-dom": "^18.2.18", 30 | "@typescript-eslint/eslint-plugin": "^7.0.0", 31 | "@typescript-eslint/parser": "^7.0.0", 32 | "@vitejs/plugin-react": "^4.2.1", 33 | "eslint": "^8.56.0", 34 | "eslint-plugin-react-hooks": "^4.6.0", 35 | "eslint-plugin-react-refresh": "^0.4.5", 36 | "glob": "^10.3.10", 37 | "react": "^18.2.0", 38 | "react-dom": "^18.2.0", 39 | "typescript": "^5.3.3", 40 | "vite": "^5.0.10", 41 | "vite-plugin-dts": "^3.6.4", 42 | "vite-plugin-lib-inject-css": "^2.0.0" 43 | }, 44 | "publishConfig": { 45 | "access": "public" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /apps/nextjs-beta/README.md: -------------------------------------------------------------------------------- 1 | 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 16 | 17 | [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`. 18 | 19 | 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. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | 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. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /apps/react/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * **deps:** update dependency @testing-library/jest-dom to v6 ([ba7f6c0](https://github.com/tsparticles/react/commit/ba7f6c08f5373eaf83838ba579c4a755353ac6b4)) 12 | * fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a)) 13 | 14 | 15 | ### Features 16 | 17 | * added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3)) 18 | 19 | 20 | 21 | 22 | 23 | ## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11) 24 | 25 | **Note:** Version bump only for package react-demo 26 | 27 | 28 | 29 | 30 | 31 | ## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04) 32 | 33 | **Note:** Version bump only for package react-demo 34 | 35 | 36 | 37 | 38 | 39 | # [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04) 40 | 41 | 42 | ### Bug Fixes 43 | 44 | * **deps:** update dependency @testing-library/react to v14 ([107b5c9](https://github.com/tsparticles/react/commit/107b5c9c76478bb6eb0ae9d1873f62beefc423a9)) 45 | * **deps:** update dependency @testing-library/user-event to v14 ([62043e2](https://github.com/tsparticles/react/commit/62043e22da2caefcbccc1dfa563aa01a2f6769b4)) 46 | * **deps:** update dependency web-vitals to v3 ([d3b48dc](https://github.com/tsparticles/react/commit/d3b48dcf6927778903314696c3b6b351d4eaed4f)) 47 | -------------------------------------------------------------------------------- /templates/react/template/src/App.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from "react"; 2 | import Particles, {initParticlesEngine} from "@tsparticles/react"; 3 | import {loadFull} from "tsparticles"; 4 | import logo from "./logo.svg"; 5 | import "./App.css"; 6 | import particlesOptions from "./particles.json"; 7 | 8 | function App() { 9 | const [init, setInit] = useState(false); 10 | 11 | useEffect(() => { 12 | if (init) { 13 | return; 14 | } 15 | 16 | initParticlesEngine(async (engine) => { 17 | await loadFull(engine); 18 | }).then(() => { 19 | setInit(true); 20 | }); 21 | }, []); 22 | 23 | return ( 24 |
25 | {init && } 26 |
27 | logo 28 |

29 | Edit src/App.js and save to reload. 30 |

31 |

32 | Edit src/particles.json to customize Particles, then save 33 | to reload. 34 |

35 | 41 | Learn React 42 | 43 | 49 | See Particles samples 50 | 51 |
52 |
53 | ); 54 | } 55 | 56 | export default App; 57 | -------------------------------------------------------------------------------- /apps/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /templates/react-ts/template/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /templates/react/template/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 3 | import type { Engine } from "@tsparticles/engine"; 4 | import { loadFull } from "tsparticles"; 5 | import logo from "./logo.svg"; 6 | import "./App.css"; 7 | import particlesOptions from "./particles.json"; 8 | import { ISourceOptions } from "@tsparticles/engine"; 9 | 10 | function App() { 11 | const [ init, setInit ] = useState(false); 12 | 13 | useEffect(() => { 14 | initParticlesEngine(async (engine) => { 15 | await loadFull(engine); 16 | }).then(() => { 17 | setInit(true); 18 | }); 19 | }, []); 20 | 21 | return ( 22 |
23 | {init && ( 24 | 27 | )} 28 |
29 | logo 30 |

31 | Edit src/App.tsx and save to reload. 32 |

33 |

34 | Edit src/particles.json to customize Particles, then save 35 | to reload. 36 |

37 | 43 | Learn React 44 | 45 | 51 | See Particles samples 52 | 53 |
54 |
55 | ); 56 | } 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /templates/react-ts/template/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). -------------------------------------------------------------------------------- /apps/nextjs/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | /*padding: 0 2rem;*/ 3 | } 4 | 5 | .main { 6 | min-height: 100vh; 7 | padding: 4rem 0; 8 | flex: 1; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .footer { 16 | display: flex; 17 | flex: 1; 18 | padding: 2rem 0; 19 | border-top: 1px solid #eaeaea; 20 | justify-content: center; 21 | align-items: center; 22 | backdrop-filter: blur(50px); 23 | -webkit-backdrop-filter: blur(50px); 24 | } 25 | 26 | .footer a { 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | flex-grow: 1; 31 | } 32 | 33 | .title a { 34 | color: #0070f3; 35 | text-decoration: none; 36 | } 37 | 38 | .title a:hover, 39 | .title a:focus, 40 | .title a:active { 41 | text-decoration: underline; 42 | } 43 | 44 | .title { 45 | margin: 0; 46 | line-height: 1.15; 47 | font-size: 4rem; 48 | } 49 | 50 | .title, 51 | .description { 52 | text-align: center; 53 | } 54 | 55 | .description { 56 | margin: 4rem 0; 57 | line-height: 1.5; 58 | font-size: 1.5rem; 59 | } 60 | 61 | .code { 62 | background: #fafafa; 63 | color: black; 64 | border-radius: 5px; 65 | padding: 0.75rem; 66 | font-size: 1.1rem; 67 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 68 | Bitstream Vera Sans Mono, Courier New, monospace; 69 | } 70 | 71 | .grid { 72 | display: flex; 73 | align-items: center; 74 | justify-content: center; 75 | flex-wrap: wrap; 76 | max-width: 800px; 77 | } 78 | 79 | .card { 80 | margin: 1rem; 81 | padding: 1.5rem; 82 | text-align: left; 83 | color: inherit; 84 | text-decoration: none; 85 | border: 1px solid #eaeaea; 86 | border-radius: 10px; 87 | transition: color 0.15s ease, border-color 0.15s ease; 88 | max-width: 300px; 89 | backdrop-filter: blur(50px); 90 | -webkit-backdrop-filter: blur(50px); 91 | } 92 | 93 | .card:hover, 94 | .card:focus, 95 | .card:active { 96 | color: #0070f3; 97 | border-color: #0070f3; 98 | } 99 | 100 | .card h2 { 101 | margin: 0 0 1rem 0; 102 | font-size: 1.5rem; 103 | } 104 | 105 | .card p { 106 | margin: 0; 107 | font-size: 1.25rem; 108 | line-height: 1.5; 109 | } 110 | 111 | .logo { 112 | height: 1em; 113 | margin-left: 0.5rem; 114 | background: white; 115 | } 116 | 117 | @media (max-width: 600px) { 118 | .grid { 119 | width: 100%; 120 | flex-direction: column; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /apps/react/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/react/template/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /templates/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cra-template-particles", 3 | "version": "3.0.0", 4 | "description": "Official React tsParticles template", 5 | "keywords": [ 6 | "front-end", 7 | "frontend", 8 | "tsparticles", 9 | "particles.js", 10 | "particlesjs", 11 | "particles", 12 | "particle", 13 | "canvas", 14 | "jsparticles", 15 | "xparticles", 16 | "particles-js", 17 | "particles-bg", 18 | "particles-bg-vue", 19 | "particles-ts", 20 | "particles.ts", 21 | "react-particles-js", 22 | "react-particles.js", 23 | "react-particles", 24 | "react", 25 | "reactjs", 26 | "vue-particles", 27 | "ngx-particles", 28 | "angular-particles", 29 | "particleground", 30 | "vue", 31 | "vuejs", 32 | "preact", 33 | "preactjs", 34 | "jquery", 35 | "angularjs", 36 | "angular", 37 | "typescript", 38 | "javascript", 39 | "animation", 40 | "web", 41 | "html5", 42 | "web-design", 43 | "webdesign", 44 | "css", 45 | "html", 46 | "css3", 47 | "animated", 48 | "background", 49 | "confetti", 50 | "canvas", 51 | "fireworks", 52 | "fireworks-js", 53 | "confetti-js", 54 | "confettijs", 55 | "fireworksjs", 56 | "canvas-confetti" 57 | ], 58 | "author": "Matteo Bruni ", 59 | "homepage": "https://particles.js.org", 60 | "license": "MIT", 61 | "main": "template.json", 62 | "files": [ 63 | "template", 64 | "template.json" 65 | ], 66 | "repository": { 67 | "type": "git", 68 | "url": "git+https://github.com/tsparticles/react.git", 69 | "directory": "templates/react" 70 | }, 71 | "bugs": { 72 | "url": "https://github.com/tsparticles/react/issues" 73 | }, 74 | "funding": [ 75 | { 76 | "type": "github", 77 | "url": "https://github.com/sponsors/matteobruni" 78 | }, 79 | { 80 | "type": "github", 81 | "url": "https://github.com/sponsors/tsparticles" 82 | }, 83 | { 84 | "type": "buymeacoffee", 85 | "url": "https://www.buymeacoffee.com/matteobruni" 86 | } 87 | ], 88 | "dependencies": { 89 | "@tsparticles/engine": "^3.0.2", 90 | "@tsparticles/react": "^3.0.0", 91 | "tslib": "^2.6.2", 92 | "tsparticles": "^3.0.2" 93 | }, 94 | "devDependencies": { 95 | "fs-extra": "^11.2.0" 96 | }, 97 | "scripts": { 98 | "build": "node scripts/prebuild.js", 99 | "build:ci": "node scripts/prebuild.js", 100 | "version": "pnpm run build && git add ./template.json", 101 | "prepack": "pnpm run build" 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /apps/nextjs-beta/app/globals.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --max-width: 1100px; 3 | --border-radius: 12px; 4 | --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 5 | 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 6 | 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; 7 | 8 | --foreground-rgb: 0, 0, 0; 9 | --background-start-rgb: 214, 219, 220; 10 | --background-end-rgb: 255, 255, 255; 11 | 12 | --primary-glow: conic-gradient( 13 | from 180deg at 50% 50%, 14 | #16abff33 0deg, 15 | #0885ff33 55deg, 16 | #54d6ff33 120deg, 17 | #0071ff33 160deg, 18 | transparent 360deg 19 | ); 20 | --secondary-glow: radial-gradient( 21 | rgba(255, 255, 255, 1), 22 | rgba(255, 255, 255, 0) 23 | ); 24 | 25 | --tile-start-rgb: 239, 245, 249; 26 | --tile-end-rgb: 228, 232, 233; 27 | --tile-border: conic-gradient( 28 | #00000080, 29 | #00000040, 30 | #00000030, 31 | #00000020, 32 | #00000010, 33 | #00000010, 34 | #00000080 35 | ); 36 | 37 | --callout-rgb: 238, 240, 241; 38 | --callout-border-rgb: 172, 175, 176; 39 | --card-rgb: 180, 185, 188; 40 | --card-border-rgb: 131, 134, 135; 41 | } 42 | 43 | @media (prefers-color-scheme: dark) { 44 | :root { 45 | --foreground-rgb: 255, 255, 255; 46 | --background-start-rgb: 0, 0, 0; 47 | --background-end-rgb: 0, 0, 0; 48 | 49 | --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); 50 | --secondary-glow: linear-gradient( 51 | to bottom right, 52 | rgba(1, 65, 255, 0), 53 | rgba(1, 65, 255, 0), 54 | rgba(1, 65, 255, 0.3) 55 | ); 56 | 57 | --tile-start-rgb: 2, 13, 46; 58 | --tile-end-rgb: 2, 5, 19; 59 | --tile-border: conic-gradient( 60 | #ffffff80, 61 | #ffffff40, 62 | #ffffff30, 63 | #ffffff20, 64 | #ffffff10, 65 | #ffffff10, 66 | #ffffff80 67 | ); 68 | 69 | --callout-rgb: 20, 20, 20; 70 | --callout-border-rgb: 108, 108, 108; 71 | --card-rgb: 100, 100, 100; 72 | --card-border-rgb: 200, 200, 200; 73 | } 74 | } 75 | 76 | * { 77 | box-sizing: border-box; 78 | padding: 0; 79 | margin: 0; 80 | } 81 | 82 | html, 83 | body { 84 | max-width: 100vw; 85 | overflow-x: hidden; 86 | } 87 | 88 | body { 89 | color: rgb(var(--foreground-rgb)); 90 | background: linear-gradient( 91 | to bottom, 92 | transparent, 93 | rgb(var(--background-end-rgb)) 94 | ) 95 | rgb(var(--background-start-rgb)); 96 | } 97 | 98 | a { 99 | color: inherit; 100 | text-decoration: none; 101 | } 102 | 103 | @media (prefers-color-scheme: dark) { 104 | html { 105 | color-scheme: dark; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /templates/react-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cra-template-particles-typescript", 3 | "version": "3.0.0", 4 | "description": "Official TypeScript React tsParticles template", 5 | "keywords": [ 6 | "front-end", 7 | "frontend", 8 | "tsparticles", 9 | "particles.js", 10 | "particlesjs", 11 | "particles", 12 | "particle", 13 | "canvas", 14 | "jsparticles", 15 | "xparticles", 16 | "particles-js", 17 | "particles-bg", 18 | "particles-bg-vue", 19 | "particles-ts", 20 | "particles.ts", 21 | "react-particles-js", 22 | "react-particles.js", 23 | "react-particles", 24 | "react", 25 | "reactjs", 26 | "vue-particles", 27 | "ngx-particles", 28 | "angular-particles", 29 | "particleground", 30 | "vue", 31 | "vuejs", 32 | "preact", 33 | "preactjs", 34 | "jquery", 35 | "angularjs", 36 | "angular", 37 | "typescript", 38 | "javascript", 39 | "animation", 40 | "web", 41 | "html5", 42 | "web-design", 43 | "webdesign", 44 | "css", 45 | "html", 46 | "css3", 47 | "animated", 48 | "background", 49 | "confetti", 50 | "canvas", 51 | "fireworks", 52 | "fireworks-js", 53 | "confetti-js", 54 | "confettijs", 55 | "fireworksjs", 56 | "canvas-confetti" 57 | ], 58 | "author": "Matteo Bruni ", 59 | "homepage": "https://particles.js.org", 60 | "license": "MIT", 61 | "main": "template.json", 62 | "files": [ 63 | "template", 64 | "template.json" 65 | ], 66 | "repository": { 67 | "type": "git", 68 | "url": "git+https://github.com/tsparticles/react.git", 69 | "directory": "templates/react-ts" 70 | }, 71 | "bugs": { 72 | "url": "https://github.com/tsparticles/react/issues" 73 | }, 74 | "funding": [ 75 | { 76 | "type": "github", 77 | "url": "https://github.com/sponsors/matteobruni" 78 | }, 79 | { 80 | "type": "github", 81 | "url": "https://github.com/sponsors/tsparticles" 82 | }, 83 | { 84 | "type": "buymeacoffee", 85 | "url": "https://www.buymeacoffee.com/matteobruni" 86 | } 87 | ], 88 | "dependencies": { 89 | "@testing-library/jest-dom": "^6.1.5", 90 | "@testing-library/react": "^14.1.2", 91 | "@testing-library/user-event": "^14.5.1", 92 | "@tsparticles/engine": "^3.0.2", 93 | "@tsparticles/react": "^3.0.0", 94 | "@types/jest": "^29.5.10", 95 | "@types/node": "^20.10.3", 96 | "@types/react": "^18.2.42", 97 | "@types/react-dom": "^18.2.17", 98 | "tslib": "^2.6.2", 99 | "tsparticles": "^3.0.2", 100 | "typescript": "^5.3.3", 101 | "web-vitals": "^3.5.0" 102 | }, 103 | "devDependencies": { 104 | "fs-extra": "^11.2.0" 105 | }, 106 | "scripts": { 107 | "build": "node scripts/prebuild.js", 108 | "build:ci": "node scripts/prebuild.js", 109 | "version": "pnpm run build && git add ./template.json", 110 | "prepack": "pnpm run build" 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /templates/react/template/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify -------------------------------------------------------------------------------- /apps/react/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | 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. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | 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) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | 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) 55 | 56 | ### Making a Progressive Web App 57 | 58 | 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) 59 | 60 | ### Advanced Configuration 61 | 62 | 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) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | 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) 71 | -------------------------------------------------------------------------------- /apps/nextjs-beta/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a)) 12 | 13 | 14 | ### Features 15 | 16 | * added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3)) 17 | 18 | 19 | 20 | 21 | 22 | ## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11) 23 | 24 | **Note:** Version bump only for package nextjs-beta-demo 25 | 26 | 27 | 28 | 29 | 30 | ## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04) 31 | 32 | **Note:** Version bump only for package nextjs-beta-demo 33 | 34 | 35 | 36 | 37 | 38 | # [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04) 39 | 40 | **Note:** Version bump only for package nextjs-beta-demo 41 | 42 | 43 | 44 | 45 | 46 | # [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14) 47 | 48 | **Note:** Version bump only for package nextjs-beta-demo 49 | 50 | 51 | 52 | 53 | 54 | ## 2.10.1 (2023-06-04) 55 | 56 | 57 | ### Bug Fixes 58 | 59 | * **deps:** update dependency @next/font to v13.2.1 ([05372e8](https://github.com/tsparticles/react/commit/05372e8b78d10b0e2e1360c046b6eb32c279389f)) 60 | * **deps:** update dependency @next/font to v13.2.3 ([abdded8](https://github.com/tsparticles/react/commit/abdded840c5e46cdc428a591ccf6448bd601bd63)) 61 | * **deps:** update dependency @next/font to v13.3.0 ([090176d](https://github.com/tsparticles/react/commit/090176de2b16bb7589241bf06fa40f92d0191f4c)) 62 | * **deps:** update dependency @next/font to v13.3.1 ([f4c94cb](https://github.com/tsparticles/react/commit/f4c94cb2a72dd32d947273dd8566bc459ec0876d)) 63 | * **deps:** update dependency @next/font to v13.3.3 ([d1b0ac6](https://github.com/tsparticles/react/commit/d1b0ac63010c6da4b1ba83ee3982b40e3e509a02)) 64 | * **deps:** update dependency @next/font to v13.3.4 ([47aa225](https://github.com/tsparticles/react/commit/47aa225f0e16ef70d6b721fe67472757e0f211da)) 65 | * **deps:** update dependency @next/font to v13.4.0 ([62caba7](https://github.com/tsparticles/react/commit/62caba7b5161e7ffd22298cff6efe0318928ee9e)) 66 | * **deps:** update dependency @next/font to v13.4.1 ([5b21bdb](https://github.com/tsparticles/react/commit/5b21bdb26fdcd00762cf5043ce6d3f025720462d)) 67 | 68 | 69 | 70 | 71 | 72 | ## [0.3.3](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.3.2...nextjs-beta-demo@0.3.3) (2023-02-12) 73 | 74 | **Note:** Version bump only for package nextjs-beta-demo 75 | 76 | ## [0.3.2](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.3.1...nextjs-beta-demo@0.3.2) (2023-02-12) 77 | 78 | **Note:** Version bump only for package nextjs-beta-demo 79 | 80 | ## [0.3.1](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.3.0...nextjs-beta-demo@0.3.1) (2023-02-11) 81 | 82 | **Note:** Version bump only for package nextjs-beta-demo 83 | 84 | # [0.3.0](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.2.0...nextjs-beta-demo@0.3.0) (2023-02-10) 85 | 86 | **Note:** Version bump only for package nextjs-beta-demo 87 | 88 | # [0.2.0](https://github.com/tsparticles/tsparticles/compare/nextjs-beta-demo@0.1.1...nextjs-beta-demo@0.2.0) (2023-01-18) 89 | 90 | **Note:** Version bump only for package nextjs-beta-demo 91 | 92 | ## 0.1.1 (2022-12-25) 93 | 94 | **Note:** Version bump only for package nextjs-beta-demo 95 | -------------------------------------------------------------------------------- /components/react/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * **deps:** update dependency @testing-library/jest-dom to v6 ([ba7f6c0](https://github.com/tsparticles/react/commit/ba7f6c08f5373eaf83838ba579c4a755353ac6b4)) 12 | * fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a)) 13 | 14 | 15 | ### Features 16 | 17 | * added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3)) 18 | * converted component to hooks API, closes [#49](https://github.com/tsparticles/react/issues/49) ([4a9eaa0](https://github.com/tsparticles/react/commit/4a9eaa018052e244ed217446e8b56cb8dfc582ed)) 19 | 20 | 21 | 22 | 23 | 24 | ## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11) 25 | 26 | 27 | ### Bug Fixes 28 | 29 | * fixed issue with component update ([7043e2c](https://github.com/tsparticles/react/commit/7043e2c5ec615a4c37f558716ece80b366ab696e)) 30 | 31 | 32 | 33 | 34 | 35 | ## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04) 36 | 37 | **Note:** Version bump only for package @tsparticles/react-workspace 38 | 39 | 40 | 41 | 42 | 43 | # [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04) 44 | 45 | 46 | ### Bug Fixes 47 | 48 | * **deps:** update dependency @testing-library/react to v14 ([107b5c9](https://github.com/tsparticles/react/commit/107b5c9c76478bb6eb0ae9d1873f62beefc423a9)) 49 | * **deps:** update dependency @testing-library/user-event to v14 ([62043e2](https://github.com/tsparticles/react/commit/62043e22da2caefcbccc1dfa563aa01a2f6769b4)) 50 | * **deps:** update dependency web-vitals to v3 ([d3b48dc](https://github.com/tsparticles/react/commit/d3b48dcf6927778903314696c3b6b351d4eaed4f)) 51 | 52 | 53 | 54 | 55 | 56 | # [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14) 57 | 58 | 59 | ### Bug Fixes 60 | 61 | * fixed container link, closes [#34](https://github.com/tsparticles/react/issues/34) ([a1c206a](https://github.com/tsparticles/react/commit/a1c206af0f0245715b67b6a6eafd906c897acc8e)) 62 | 63 | 64 | 65 | 66 | 67 | ## 2.10.1 (2023-06-04) 68 | 69 | 70 | ### Bug Fixes 71 | 72 | * changed deep equal library, the previous one had a bug for circular objects and freezed all ([ccb5f12](https://github.com/tsparticles/react/commit/ccb5f124a69ce622fe591fc8944015da64f8f799)) 73 | * **deps:** update dependency @next/font to v13.2.1 ([05372e8](https://github.com/tsparticles/react/commit/05372e8b78d10b0e2e1360c046b6eb32c279389f)) 74 | * **deps:** update dependency @next/font to v13.2.3 ([abdded8](https://github.com/tsparticles/react/commit/abdded840c5e46cdc428a591ccf6448bd601bd63)) 75 | * **deps:** update dependency @next/font to v13.3.0 ([090176d](https://github.com/tsparticles/react/commit/090176de2b16bb7589241bf06fa40f92d0191f4c)) 76 | * **deps:** update dependency @next/font to v13.3.1 ([f4c94cb](https://github.com/tsparticles/react/commit/f4c94cb2a72dd32d947273dd8566bc459ec0876d)) 77 | * **deps:** update dependency @next/font to v13.3.3 ([d1b0ac6](https://github.com/tsparticles/react/commit/d1b0ac63010c6da4b1ba83ee3982b40e3e509a02)) 78 | * **deps:** update dependency @next/font to v13.3.4 ([47aa225](https://github.com/tsparticles/react/commit/47aa225f0e16ef70d6b721fe67472757e0f211da)) 79 | * **deps:** update dependency @next/font to v13.4.0 ([62caba7](https://github.com/tsparticles/react/commit/62caba7b5161e7ffd22298cff6efe0318928ee9e)) 80 | * **deps:** update dependency @next/font to v13.4.1 ([5b21bdb](https://github.com/tsparticles/react/commit/5b21bdb26fdcd00762cf5043ce6d3f025720462d)) 81 | 82 | 83 | ### Features 84 | 85 | * updated templates to React 18 ([d9ae354](https://github.com/tsparticles/react/commit/d9ae354d71f245e85009c96007bd59df7bd422c8)) 86 | -------------------------------------------------------------------------------- /apps/nextjs/pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Image from "next/image"; 3 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 4 | import { loadBigCirclesPreset } from "@tsparticles/preset-big-circles"; 5 | import styles from "../styles/Home.module.css"; 6 | import { useCallback, useEffect, useMemo, useState } from "react"; 7 | 8 | export default function Home() { 9 | const particlesInitCb = useCallback(async (engine) => { 10 | console.log("callback"); 11 | 12 | await loadBigCirclesPreset(engine); 13 | }, []); 14 | 15 | const particlesLoaded = useCallback((container) => { 16 | console.log("loaded", container); 17 | }, []); 18 | 19 | const [ init, setInit ] = useState(false); 20 | 21 | useEffect(() => { 22 | initParticlesEngine(particlesInitCb).then(() => { 23 | setInit(true); 24 | }); 25 | }, []); 26 | 27 | const options = useMemo( 28 | () => ({ 29 | preset: "bigCircles", 30 | fullScreen: { 31 | zIndex: -1, 32 | }, 33 | }), 34 | [] 35 | ); 36 | 37 | return ( 38 | 106 | ); 107 | } 108 | -------------------------------------------------------------------------------- /apps/nextjs-beta/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Image from "next/image"; 4 | import { Inter } from "@next/font/google"; 5 | import styles from "./page.module.css"; 6 | import Particles from "./particles"; 7 | import { useEffect, useState } from "react"; 8 | import { initParticlesEngine } from "@tsparticles/react"; 9 | import { loadFull } from "tsparticles"; 10 | import { Engine } from "@tsparticles/engine"; 11 | 12 | const inter = Inter({ subsets: [ "latin" ] }); 13 | 14 | export default function Home() { 15 | const [ init, setInit ] = useState(false); 16 | 17 | useEffect(() => { 18 | initParticlesEngine(async (engine: Engine) => { 19 | await loadFull(engine); 20 | }).then(() => { 21 | setInit(true); 22 | }); 23 | }, []); 24 | 25 | return ( 26 |
27 | 28 |
29 |

30 | Get started by editing  31 | app/page.tsx 32 |

33 | 50 |
51 | 52 |
53 | Next.js Logo 61 |
62 | 13 63 |
64 |
65 | 66 | 107 |
108 | ); 109 | } 110 | -------------------------------------------------------------------------------- /apps/react/src/App.js: -------------------------------------------------------------------------------- 1 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 2 | import { loadFull } from "tsparticles"; 3 | import { useCallback, useEffect, useMemo, useRef, useState } from "react"; 4 | import logo from "./logo.svg"; 5 | import "./App.css"; 6 | 7 | function App() { 8 | const containerRef = useRef(null), [ init, setInit ] = useState(false); 9 | 10 | useEffect(() => { 11 | if (init) { 12 | return; 13 | } 14 | 15 | initParticlesEngine(async (engine) => { 16 | await loadFull(engine); 17 | }).then(() => { 18 | setInit(true); 19 | }); 20 | }, [ init ]); 21 | 22 | const particlesLoaded = useCallback( 23 | (container) => { 24 | containerRef.current = container; 25 | 26 | window.particlesContainer = container; 27 | }, 28 | [ containerRef ] 29 | ), 30 | options = useMemo( 31 | () => ({ 32 | fullScreen: { 33 | zIndex: -1, 34 | }, 35 | particles: { 36 | number: { 37 | value: 100, 38 | }, 39 | links: { 40 | enable: true, 41 | }, 42 | move: { 43 | enable: true, 44 | }, 45 | }, 46 | themes: [ 47 | { 48 | name: "light", 49 | default: { 50 | value: true, 51 | auto: true, 52 | mode: "light", 53 | }, 54 | options: { 55 | background: { 56 | color: "#ffffff", 57 | }, 58 | particles: { 59 | color: { 60 | value: "#000000", 61 | }, 62 | links: { 63 | color: "#000000", 64 | }, 65 | }, 66 | }, 67 | }, 68 | { 69 | name: "dark", 70 | default: { 71 | value: true, 72 | auto: true, 73 | mode: "dark", 74 | }, 75 | options: { 76 | background: { 77 | color: "#000000", 78 | }, 79 | particles: { 80 | color: { 81 | value: "#ffffff", 82 | }, 83 | links: { 84 | color: "#ffffff", 85 | }, 86 | }, 87 | }, 88 | }, 89 | ], 90 | }), 91 | [] 92 | ), 93 | lightTheme = () => { 94 | containerRef.current?.loadTheme("light"); 95 | }, 96 | darkTheme = () => { 97 | containerRef.current?.loadTheme("dark"); 98 | }; 99 | 100 | return ( 101 |
102 |
103 | logo 104 |

105 | Edit src/App.js and save to reload. 106 |

107 | 113 | Learn React 114 | 115 | 118 | 121 |
122 | {init && ( 123 | 128 | )} 129 |
130 | ); 131 | } 132 | 133 | export default App; 134 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | - legacy 7 | pull_request: 8 | branches: 9 | - main 10 | - legacy 11 | 12 | #env: 13 | #NX_CLOUD_DISTRIBUTED_EXECUTION: true 14 | #NX_CLOUD_ACCESS_TOKEN: '${{ secrets.NX_CLOUD_ACCESS_TOKEN }}' 15 | #NX_BRANCH: '${{github.event.pull_request.number || github.ref_name}}' 16 | 17 | jobs: 18 | 19 | main: 20 | runs-on: ubuntu-latest 21 | if: ${{ github.event_name != 'pull_request' }} 22 | steps: 23 | - uses: actions/checkout@v4 24 | name: Checkout [main] 25 | with: 26 | fetch-depth: 0 27 | #- name: Derive appropriate SHAs for base and head for `nx affected` commands 28 | # uses: nrwl/nx-set-shas@v3 29 | - uses: actions/setup-node@v4 30 | with: 31 | node-version: '20' 32 | - uses: pnpm/action-setup@v3.0.0 33 | name: Install pnpm 34 | id: pnpm-install 35 | with: 36 | version: 8 37 | run_install: false 38 | - name: Get pnpm version 39 | id: pnpm-version 40 | run: | 41 | echo "$(pnpm --version)" 42 | 43 | - name: Get pnpm store directory 44 | id: pnpm-cache 45 | run: | 46 | echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" 47 | 48 | - uses: actions/cache@v4 49 | name: Setup pnpm cache 50 | with: 51 | path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} 52 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 53 | restore-keys: | 54 | ${{ runner.os }}-pnpm-store- 55 | - run: pnpm install --no-frozen-lockfile 56 | #- run: npx nx-cloud start-ci-run 57 | #- run: pnpm run prettify:ci:readme 58 | - run: pnpm run build:ci #--concurrency 3 59 | #- run: npx nx-cloud stop-all-agents 60 | pr: 61 | runs-on: ubuntu-latest 62 | if: ${{ github.event_name == 'pull_request' }} 63 | steps: 64 | - uses: actions/checkout@v4 65 | with: 66 | ref: ${{ github.event.pull_request.head.ref }} 67 | repository: ${{ github.event.pull_request.head.repo.full_name }} 68 | fetch-depth: 0 69 | #- name: Derive appropriate SHAs for base and head for `nx affected` commands 70 | # uses: nrwl/nx-set-shas@v3 71 | - uses: actions/setup-node@v4 72 | with: 73 | node-version: '20' 74 | - uses: pnpm/action-setup@v3.0.0 75 | name: Install pnpm 76 | id: pnpm-install 77 | with: 78 | version: 8 79 | run_install: false 80 | - name: Get pnpm version 81 | id: pnpm-version 82 | run: | 83 | echo "$(pnpm --version)" 84 | 85 | - name: Get pnpm store directory 86 | id: pnpm-cache 87 | run: | 88 | echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" 89 | 90 | - uses: actions/cache@v4 91 | name: Setup pnpm cache 92 | with: 93 | path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} 94 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 95 | restore-keys: | 96 | ${{ runner.os }}-pnpm-store- 97 | - run: pnpm install --no-frozen-lockfile 98 | #- run: npx nx-cloud start-ci-run 99 | #- run: pnpm run prettify:ci:readme 100 | - run: pnpm run build:ci #--concurrency 3 101 | #- run: npx nx-cloud stop-all-agents 102 | - run: echo ${{ github.repository_owner }} 103 | - run: echo ${{ github.actor }} 104 | 105 | # agents: 106 | # runs-on: ubuntu-latest 107 | # name: Nx Agent 108 | # timeout-minutes: 60 109 | # strategy: 110 | # matrix: 111 | # agent: [ 1, 2, 3 ] 112 | # steps: 113 | # - uses: actions/checkout@v3 114 | # - uses: actions/setup-node@v3 115 | # with: 116 | # node-version: '20' 117 | # - uses: pnpm/action-setup@v2.2.2 118 | # name: Install pnpm 119 | # id: pnpm-install 120 | # with: 121 | # version: 8 122 | # run_install: false 123 | # - name: Get pnpm version 124 | # id: pnpm-version 125 | # run: | 126 | # echo "$(pnpm --version)" 127 | # 128 | # - name: Get pnpm store directory 129 | # id: pnpm-cache 130 | # run: | 131 | # echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" 132 | # 133 | # - uses: actions/cache@v3 134 | # name: Setup pnpm cache 135 | # with: 136 | # path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} 137 | # key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 138 | # restore-keys: | 139 | # ${{ runner.os }}-pnpm-store- 140 | # - run: pnpm install --no-frozen-lockfile 141 | # - name: Start Nx Agent ${{ matrix.agent }} 142 | # run: npx nx-cloud start-agent 143 | -------------------------------------------------------------------------------- /templates/react/template/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /apps/nextjs-beta/app/page.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-between; 5 | align-items: center; 6 | padding: 6rem; 7 | min-height: 100vh; 8 | } 9 | 10 | .description { 11 | display: inherit; 12 | justify-content: inherit; 13 | align-items: inherit; 14 | font-size: 0.85rem; 15 | max-width: var(--max-width); 16 | width: 100%; 17 | z-index: 2; 18 | font-family: var(--font-mono); 19 | } 20 | 21 | .description a { 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | gap: 0.5rem; 26 | } 27 | 28 | .description p { 29 | position: relative; 30 | margin: 0; 31 | padding: 1rem; 32 | background-color: rgba(var(--callout-rgb), 0.5); 33 | border: 1px solid rgba(var(--callout-border-rgb), 0.3); 34 | border-radius: var(--border-radius); 35 | } 36 | 37 | .code { 38 | font-weight: 700; 39 | font-family: var(--font-mono); 40 | } 41 | 42 | .grid { 43 | display: grid; 44 | grid-template-columns: repeat(3, minmax(33%, auto)); 45 | width: var(--max-width); 46 | max-width: 100%; 47 | } 48 | 49 | .card { 50 | padding: 1rem 1.2rem; 51 | border-radius: var(--border-radius); 52 | background: rgba(var(--card-rgb), 0); 53 | border: 1px solid rgba(var(--card-border-rgb), 0); 54 | transition: background 200ms, border 200ms; 55 | } 56 | 57 | .card span { 58 | display: inline-block; 59 | transition: transform 200ms; 60 | } 61 | 62 | .card h2 { 63 | font-weight: 600; 64 | margin-bottom: 0.7rem; 65 | } 66 | 67 | .card p { 68 | margin: 0; 69 | opacity: 0.6; 70 | font-size: 0.9rem; 71 | line-height: 1.5; 72 | max-width: 34ch; 73 | } 74 | 75 | .center { 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | position: relative; 80 | padding: 4rem 0; 81 | } 82 | 83 | .center::before { 84 | background: var(--secondary-glow); 85 | border-radius: 50%; 86 | width: 480px; 87 | height: 360px; 88 | margin-left: -400px; 89 | } 90 | 91 | .center::after { 92 | background: var(--primary-glow); 93 | width: 240px; 94 | height: 180px; 95 | z-index: -1; 96 | } 97 | 98 | .center::before, 99 | .center::after { 100 | content: ''; 101 | left: 50%; 102 | position: absolute; 103 | filter: blur(45px); 104 | transform: translateZ(0); 105 | } 106 | 107 | .logo, 108 | .thirteen { 109 | position: relative; 110 | } 111 | 112 | .thirteen { 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | width: 75px; 117 | height: 75px; 118 | padding: 25px 10px; 119 | margin-left: 16px; 120 | transform: translateZ(0); 121 | border-radius: var(--border-radius); 122 | overflow: hidden; 123 | box-shadow: 0px 2px 8px -1px #0000001a; 124 | } 125 | 126 | .thirteen::before, 127 | .thirteen::after { 128 | content: ''; 129 | position: absolute; 130 | z-index: -1; 131 | } 132 | 133 | /* Conic Gradient Animation */ 134 | .thirteen::before { 135 | animation: 6s rotate linear infinite; 136 | width: 200%; 137 | height: 200%; 138 | background: var(--tile-border); 139 | } 140 | 141 | /* Inner Square */ 142 | .thirteen::after { 143 | inset: 0; 144 | padding: 1px; 145 | border-radius: var(--border-radius); 146 | background: linear-gradient( 147 | to bottom right, 148 | rgba(var(--tile-start-rgb), 1), 149 | rgba(var(--tile-end-rgb), 1) 150 | ); 151 | background-clip: content-box; 152 | } 153 | 154 | /* Enable hover only on non-touch devices */ 155 | @media (hover: hover) and (pointer: fine) { 156 | .card:hover { 157 | background: rgba(var(--card-rgb), 0.1); 158 | border: 1px solid rgba(var(--card-border-rgb), 0.15); 159 | } 160 | 161 | .card:hover span { 162 | transform: translateX(4px); 163 | } 164 | } 165 | 166 | @media (prefers-reduced-motion) { 167 | .thirteen::before { 168 | animation: none; 169 | } 170 | 171 | .card:hover span { 172 | transform: none; 173 | } 174 | } 175 | 176 | /* Mobile and Tablet */ 177 | @media (max-width: 1023px) { 178 | .content { 179 | padding: 4rem; 180 | } 181 | 182 | .grid { 183 | grid-template-columns: 1fr; 184 | margin-bottom: 120px; 185 | max-width: 320px; 186 | text-align: center; 187 | } 188 | 189 | .card { 190 | padding: 1rem 2.5rem; 191 | } 192 | 193 | .card h2 { 194 | margin-bottom: 0.5rem; 195 | } 196 | 197 | .center { 198 | padding: 8rem 0 6rem; 199 | } 200 | 201 | .center::before { 202 | transform: none; 203 | height: 300px; 204 | } 205 | 206 | .description { 207 | font-size: 0.8rem; 208 | } 209 | 210 | .description a { 211 | padding: 1rem; 212 | } 213 | 214 | .description p, 215 | .description div { 216 | display: flex; 217 | justify-content: center; 218 | position: fixed; 219 | width: 100%; 220 | } 221 | 222 | .description p { 223 | align-items: center; 224 | inset: 0 0 auto; 225 | padding: 2rem 1rem 1.4rem; 226 | border-radius: 0; 227 | border: none; 228 | border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); 229 | background: linear-gradient( 230 | to bottom, 231 | rgba(var(--background-start-rgb), 1), 232 | rgba(var(--callout-rgb), 0.5) 233 | ); 234 | background-clip: padding-box; 235 | backdrop-filter: blur(24px); 236 | } 237 | 238 | .description div { 239 | align-items: flex-end; 240 | pointer-events: none; 241 | inset: auto 0 0; 242 | padding: 2rem; 243 | height: 200px; 244 | background: linear-gradient( 245 | to bottom, 246 | transparent 0%, 247 | rgb(var(--background-end-rgb)) 40% 248 | ); 249 | z-index: 1; 250 | } 251 | } 252 | 253 | @media (prefers-color-scheme: dark) { 254 | .vercelLogo { 255 | filter: invert(1); 256 | } 257 | 258 | .logo, 259 | .thirteen img { 260 | filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); 261 | } 262 | } 263 | 264 | @keyframes rotate { 265 | from { 266 | transform: rotate(360deg); 267 | } 268 | to { 269 | transform: rotate(0deg); 270 | } 271 | } 272 | -------------------------------------------------------------------------------- /templates/react-ts/template/src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://cra.link/PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | type Config = { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | }; 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | process.env.PUBLIC_URL, 33 | window.location.href 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener('load', () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | 'This web app is being served cache-first by a service ' + 54 | 'worker. To learn more, visit https://cra.link/PWA' 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === 'installed') { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | 'New content is available and will be used when all ' + 82 | 'tabs for this page are closed. See https://cra.link/PWA.' 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log('Content is cached for offline use.'); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error('Error during service worker registration:', error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl, { 112 | headers: { 'Service-Worker': 'script' } 113 | }) 114 | .then(response => { 115 | // Ensure service worker exists, and that we really are getting a JS file. 116 | const contentType = response.headers.get('content-type'); 117 | if ( 118 | response.status === 404 || 119 | (contentType != null && contentType.indexOf('javascript') === -1) 120 | ) { 121 | // No service worker found. Probably a different app. Reload the page. 122 | navigator.serviceWorker.ready.then(registration => { 123 | registration.unregister().then(() => { 124 | window.location.reload(); 125 | }); 126 | }); 127 | } else { 128 | // Service worker found. Proceed as normal. 129 | registerValidSW(swUrl, config); 130 | } 131 | }) 132 | .catch(() => { 133 | console.log( 134 | 'No internet connection found. App is running in offline mode.' 135 | ); 136 | }); 137 | } 138 | 139 | export function unregister() { 140 | if ('serviceWorker' in navigator) { 141 | navigator.serviceWorker.ready 142 | .then(registration => { 143 | registration.unregister(); 144 | }) 145 | .catch(error => { 146 | console.error(error.message); 147 | }); 148 | } 149 | } -------------------------------------------------------------------------------- /apps/nextjs/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a)) 12 | 13 | 14 | ### Features 15 | 16 | * added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3)) 17 | 18 | 19 | 20 | 21 | 22 | ## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11) 23 | 24 | **Note:** Version bump only for package nextjs 25 | 26 | 27 | 28 | 29 | 30 | ## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04) 31 | 32 | **Note:** Version bump only for package nextjs 33 | 34 | 35 | 36 | 37 | 38 | # [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04) 39 | 40 | **Note:** Version bump only for package nextjs 41 | 42 | 43 | 44 | 45 | 46 | # [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14) 47 | 48 | **Note:** Version bump only for package nextjs 49 | 50 | 51 | 52 | 53 | 54 | ## 2.10.1 (2023-06-04) 55 | 56 | **Note:** Version bump only for package nextjs 57 | 58 | 59 | 60 | 61 | 62 | ## [0.11.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.11.2...nextjs@0.11.3) (2023-02-12) 63 | 64 | **Note:** Version bump only for package nextjs 65 | 66 | ## [0.11.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.11.1...nextjs@0.11.2) (2023-02-12) 67 | 68 | **Note:** Version bump only for package nextjs 69 | 70 | ## [0.11.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.11.0...nextjs@0.11.1) (2023-02-11) 71 | 72 | **Note:** Version bump only for package nextjs 73 | 74 | # [0.11.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.10.0...nextjs@0.11.0) (2023-02-10) 75 | 76 | **Note:** Version bump only for package nextjs 77 | 78 | # [0.10.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.9.1...nextjs@0.10.0) (2023-01-18) 79 | 80 | **Note:** Version bump only for package nextjs 81 | 82 | ## [0.9.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.9.0...nextjs@0.9.1) (2022-12-25) 83 | 84 | **Note:** Version bump only for package nextjs 85 | 86 | # [0.9.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.8.0...nextjs@0.9.0) (2022-12-23) 87 | 88 | **Note:** Version bump only for package nextjs 89 | 90 | # [0.8.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.3...nextjs@0.8.0) (2022-12-06) 91 | 92 | **Note:** Version bump only for package nextjs 93 | 94 | ## [0.7.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.2...nextjs@0.7.3) (2022-11-07) 95 | 96 | **Note:** Version bump only for package nextjs 97 | 98 | ## [0.7.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.1...nextjs@0.7.2) (2022-11-07) 99 | 100 | **Note:** Version bump only for package nextjs 101 | 102 | ## [0.7.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.7.0...nextjs@0.7.1) (2022-11-03) 103 | 104 | **Note:** Version bump only for package nextjs 105 | 106 | # [0.7.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.6.0...nextjs@0.7.0) (2022-11-02) 107 | 108 | **Note:** Version bump only for package nextjs 109 | 110 | # [0.6.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.4...nextjs@0.6.0) (2022-10-30) 111 | 112 | **Note:** Version bump only for package nextjs 113 | 114 | ## [0.5.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.3...nextjs@0.5.4) (2022-09-30) 115 | 116 | **Note:** Version bump only for package nextjs 117 | 118 | ## [0.5.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.2...nextjs@0.5.3) (2022-09-30) 119 | 120 | **Note:** Version bump only for package nextjs 121 | 122 | ## [0.5.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.1...nextjs@0.5.2) (2022-09-21) 123 | 124 | **Note:** Version bump only for package nextjs 125 | 126 | ## [0.5.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.5.0...nextjs@0.5.1) (2022-09-13) 127 | 128 | **Note:** Version bump only for package nextjs 129 | 130 | # [0.5.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.4...nextjs@0.5.0) (2022-09-11) 131 | 132 | ### Bug Fixes 133 | 134 | - **deps:** update dependency next to v12.2.4 [security] ([8ac6931](https://github.com/tsparticles/tsparticles/commit/8ac6931121a264d986f96e0a59db517ccb404451)) 135 | 136 | ## [0.4.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.2...nextjs@0.4.4) (2022-08-26) 137 | 138 | **Note:** Version bump only for package nextjs 139 | 140 | ## [0.4.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.2...nextjs@0.4.3) (2022-08-21) 141 | 142 | **Note:** Version bump only for package nextjs 143 | 144 | ## [0.4.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.1...nextjs@0.4.2) (2022-08-16) 145 | 146 | **Note:** Version bump only for package nextjs 147 | 148 | ## [0.4.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.4.0...nextjs@0.4.1) (2022-08-12) 149 | 150 | **Note:** Version bump only for package nextjs 151 | 152 | # [0.4.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.4...nextjs@0.4.0) (2022-08-11) 153 | 154 | **Note:** Version bump only for package nextjs 155 | 156 | ## [0.3.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.3...nextjs@0.3.4) (2022-07-28) 157 | 158 | ### Features 159 | 160 | - preparing @tsparticles/react and switching alternate packages ([49e749e](https://github.com/tsparticles/tsparticles/commit/49e749e90e076f0cb22eefe0f3399102f5b9fb35)) 161 | 162 | ## [0.3.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.2...nextjs@0.3.3) (2022-07-01) 163 | 164 | **Note:** Version bump only for package nextjs 165 | 166 | ## [0.3.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.1...nextjs@0.3.2) (2022-07-01) 167 | 168 | **Note:** Version bump only for package nextjs 169 | 170 | ## [0.3.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.3.0...nextjs@0.3.1) (2022-07-01) 171 | 172 | **Note:** Version bump only for package nextjs 173 | 174 | # [0.3.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.4...nextjs@0.3.0) (2022-06-18) 175 | 176 | ### Bug Fixes 177 | 178 | - **deps:** update react monorepo to v18.1.0 ([6b45793](https://github.com/tsparticles/tsparticles/commit/6b457937c41d7681a2135dfcb6ff220e578f22bb)) 179 | 180 | ## [0.2.4](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.3...nextjs@0.2.4) (2022-04-16) 181 | 182 | **Note:** Version bump only for package nextjs 183 | 184 | ## [0.2.3](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.2...nextjs@0.2.3) (2022-04-14) 185 | 186 | **Note:** Version bump only for package nextjs 187 | 188 | ## [0.2.2](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.1...nextjs@0.2.2) (2022-04-06) 189 | 190 | ### Bug Fixes 191 | 192 | - **deps:** update react monorepo to v18 ([4a434e6](https://github.com/tsparticles/tsparticles/commit/4a434e6217f7b65291da2a053af8f2ded70c879c)) 193 | 194 | ## [0.2.1](https://github.com/tsparticles/tsparticles/compare/nextjs@0.2.0...nextjs@0.2.1) (2022-04-06) 195 | 196 | **Note:** Version bump only for package nextjs 197 | 198 | # [0.2.0](https://github.com/tsparticles/tsparticles/compare/nextjs@0.1.1...nextjs@0.2.0) (2022-04-04) 199 | 200 | ### Bug Fixes 201 | 202 | - **deps:** update react monorepo to v18 ([79e531d](https://github.com/tsparticles/tsparticles/commit/79e531dc77dd73c9493e30e9eb23f5620a860ea9)) 203 | 204 | ## 0.1.1 (2022-03-20) 205 | 206 | **Note:** Version bump only for package nextjs 207 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Aa][Rr][Mm]/ 27 | [Aa][Rr][Mm]64/ 28 | bld/ 29 | [Bb]in/ 30 | [Oo]bj/ 31 | [Ll]og/ 32 | [Ll]ogs/ 33 | 34 | # Visual Studio 2015/2017 cache/options directory 35 | .vs/ 36 | # Uncomment if you have tasks that create the project's static files in wwwroot 37 | #wwwroot/ 38 | 39 | # Visual Studio 2017 auto generated files 40 | Generated\ Files/ 41 | 42 | # MSTest test Results 43 | [Tt]est[Rr]esult*/ 44 | [Bb]uild[Ll]og.* 45 | 46 | # NUnit 47 | *.VisualState.xml 48 | TestResult.xml 49 | nunit-*.xml 50 | 51 | # Build Results of an ATL Project 52 | [Dd]ebugPS/ 53 | [Rr]eleasePS/ 54 | dlldata.c 55 | 56 | # Benchmark Results 57 | BenchmarkDotNet.Artifacts/ 58 | 59 | # .NET Core 60 | project.lock.json 61 | project.fragment.lock.json 62 | artifacts/ 63 | 64 | # StyleCop 65 | StyleCopReport.xml 66 | 67 | # Files built by Visual Studio 68 | *_i.c 69 | *_p.c 70 | *_h.h 71 | *.ilk 72 | *.meta 73 | *.obj 74 | *.iobj 75 | *.pch 76 | *.pdb 77 | *.ipdb 78 | *.pgc 79 | *.pgd 80 | *.rsp 81 | *.sbr 82 | *.tlb 83 | *.tli 84 | *.tlh 85 | *.tmp 86 | *.tmp_proj 87 | *_wpftmp.csproj 88 | *.log 89 | *.vspscc 90 | *.vssscc 91 | .builds 92 | *.pidb 93 | *.svclog 94 | *.scc 95 | 96 | # Chutzpah Test files 97 | _Chutzpah* 98 | 99 | # Visual C++ cache files 100 | ipch/ 101 | *.aps 102 | *.ncb 103 | *.opendb 104 | *.opensdf 105 | *.sdf 106 | *.cachefile 107 | *.VC.db 108 | *.VC.VC.opendb 109 | 110 | # Visual Studio profiler 111 | *.psess 112 | *.vsp 113 | *.vspx 114 | *.sap 115 | 116 | # Visual Studio Trace Files 117 | *.e2e 118 | 119 | # TFS 2012 Local Workspace 120 | $tf/ 121 | 122 | # Guidance Automation Toolkit 123 | *.gpState 124 | 125 | # ReSharper is a .NET coding add-in 126 | _ReSharper*/ 127 | *.[Rr]e[Ss]harper 128 | *.DotSettings.user 129 | 130 | # JustCode is a .NET coding add-in 131 | .JustCode 132 | 133 | # TeamCity is a build add-in 134 | _TeamCity* 135 | 136 | # DotCover is a Code Coverage Tool 137 | *.dotCover 138 | 139 | # AxoCover is a Code Coverage Tool 140 | .axoCover/* 141 | !.axoCover/settings.json 142 | 143 | # Visual Studio code coverage results 144 | *.coverage 145 | *.coveragexml 146 | 147 | # NCrunch 148 | _NCrunch_* 149 | .*crunch*.local.xml 150 | nCrunchTemp_* 151 | 152 | # MightyMoose 153 | *.mm.* 154 | AutoTest.Net/ 155 | 156 | # Web workbench (sass) 157 | .sass-cache/ 158 | 159 | # Installshield output folder 160 | [Ee]xpress/ 161 | 162 | # DocProject is a documentation generator add-in 163 | DocProject/buildhelp/ 164 | DocProject/Help/*.HxT 165 | DocProject/Help/*.HxC 166 | DocProject/Help/*.hhc 167 | DocProject/Help/*.hhk 168 | DocProject/Help/*.hhp 169 | DocProject/Help/Html2 170 | DocProject/Help/html 171 | 172 | # Click-Once directory 173 | publish/ 174 | 175 | # Publish Web Output 176 | *.[Pp]ublish.xml 177 | *.azurePubxml 178 | # Note: Comment the next line if you want to checkin your web deploy settings, 179 | # but database connection strings (with potential passwords) will be unencrypted 180 | *.pubxml 181 | *.publishproj 182 | 183 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 184 | # checkin your Azure Web App publish settings, but sensitive information contained 185 | # in these scripts will be unencrypted 186 | PublishScripts/ 187 | 188 | # NuGet Packages 189 | *.nupkg 190 | # NuGet Symbol Packages 191 | *.snupkg 192 | # The packages folder can be ignored because of Package Restore 193 | **/[Pp]ackages/* 194 | # except build/, which is used as an MSBuild target. 195 | !**/[Pp]ackages/build/ 196 | # Uncomment if necessary however generally it will be regenerated when needed 197 | #!**/[Pp]ackages/repositories.config 198 | # NuGet v3's project.json files produces more ignorable files 199 | *.nuget.props 200 | *.nuget.targets 201 | 202 | # Microsoft Azure Build Output 203 | csx/ 204 | *.build.csdef 205 | 206 | # Microsoft Azure Emulator 207 | ecf/ 208 | rcf/ 209 | 210 | # Windows Store app package directories and files 211 | AppPackages/ 212 | BundleArtifacts/ 213 | Package.StoreAssociation.xml 214 | _pkginfo.txt 215 | *.appx 216 | *.appxbundle 217 | *.appxupload 218 | 219 | # Visual Studio cache files 220 | # files ending in .cache can be ignored 221 | *.[Cc]ache 222 | # but keep track of directories ending in .cache 223 | !?*.[Cc]ache/ 224 | 225 | # Others 226 | ClientBin/ 227 | ~$* 228 | *~ 229 | *.dbmdl 230 | *.dbproj.schemaview 231 | *.jfm 232 | *.pfx 233 | *.publishsettings 234 | orleans.codegen.cs 235 | 236 | # Including strong name files can present a security risk 237 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 238 | #*.snk 239 | 240 | # Since there are multiple workflows, uncomment next line to ignore bower_components 241 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 242 | #bower_components/ 243 | 244 | # RIA/Silverlight projects 245 | Generated_Code/ 246 | 247 | # Backup & report files from converting an old project file 248 | # to a newer Visual Studio version. Backup files are not needed, 249 | # because we have git ;-) 250 | _UpgradeReport_Files/ 251 | Backup*/ 252 | UpgradeLog*.XML 253 | UpgradeLog*.htm 254 | ServiceFabricBackup/ 255 | *.rptproj.bak 256 | 257 | # SQL Server files 258 | *.mdf 259 | *.ldf 260 | *.ndf 261 | 262 | # Business Intelligence projects 263 | *.rdl.data 264 | *.bim.layout 265 | *.bim_*.settings 266 | *.rptproj.rsuser 267 | *- [Bb]ackup.rdl 268 | *- [Bb]ackup ([0-9]).rdl 269 | *- [Bb]ackup ([0-9][0-9]).rdl 270 | 271 | # Microsoft Fakes 272 | FakesAssemblies/ 273 | 274 | # GhostDoc plugin setting file 275 | *.GhostDoc.xml 276 | 277 | # Node.js Tools for Visual Studio 278 | .ntvs_analysis.dat 279 | node_modules/ 280 | 281 | # Visual Studio 6 build log 282 | *.plg 283 | 284 | # Visual Studio 6 workspace options file 285 | *.opt 286 | 287 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 288 | *.vbw 289 | 290 | # Visual Studio LightSwitch build output 291 | **/*.HTMLClient/GeneratedArtifacts 292 | **/*.DesktopClient/GeneratedArtifacts 293 | **/*.DesktopClient/ModelManifest.xml 294 | **/*.Server/GeneratedArtifacts 295 | **/*.Server/ModelManifest.xml 296 | _Pvt_Extensions 297 | 298 | # Paket dependency manager 299 | .paket/paket.exe 300 | paket-files/ 301 | 302 | # FAKE - F# Make 303 | .fake/ 304 | 305 | # CodeRush personal settings 306 | .cr/personal 307 | 308 | # Python Tools for Visual Studio (PTVS) 309 | __pycache__/ 310 | *.pyc 311 | 312 | # Cake - Uncomment if you are using it 313 | # tools/** 314 | # !tools/packages.config 315 | 316 | # Tabs Studio 317 | *.tss 318 | 319 | # Telerik's JustMock configuration file 320 | *.jmconfig 321 | 322 | # BizTalk build output 323 | *.btp.cs 324 | *.btm.cs 325 | *.odx.cs 326 | *.xsd.cs 327 | 328 | # OpenCover UI analysis results 329 | OpenCover/ 330 | 331 | # Azure Stream Analytics local run output 332 | ASALocalRun/ 333 | 334 | # MSBuild Binary and Structured Log 335 | *.binlog 336 | 337 | # NVidia Nsight GPU debugger configuration file 338 | *.nvuser 339 | 340 | # MFractors (Xamarin productivity tool) working folder 341 | .mfractor/ 342 | 343 | # Local History for Visual Studio 344 | .localhistory/ 345 | 346 | # BeatPulse healthcheck temp database 347 | healthchecksdb 348 | 349 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 350 | MigrationBackup/ 351 | 352 | # Ionide (cross platform F# VS Code tools) working folder 353 | .ionide/ 354 | 355 | .DS_Store 356 | dist/ 357 | tmp/ 358 | build/ 359 | 360 | .idea/ 361 | .vscode/ 362 | .nyc_output/ 363 | coverage/ 364 | .codacy-coverage/ 365 | 366 | package-lock.json 367 | yarn.lock 368 | 369 | size-plugin.json 370 | size-plugin-ssr.json 371 | 372 | .parcel-cache 373 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) 2 | 3 | # @tsparticles/react 4 | 5 | [![npm](https://img.shields.io/npm/v/@tsparticles/react)](https://www.npmjs.com/package/@tsparticles/react) [![npm](https://img.shields.io/npm/dm/@tsparticles/react)](https://www.npmjs.com/package/@tsparticles/react) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) 6 | 7 | Official [tsParticles](https://github.com/tsparticles/tsparticles) ReactJS component 8 | 9 | [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles) 10 | 11 | [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 12 | 13 | ## Installation 14 | 15 | ```shell 16 | npm install @tsparticles/react 17 | ``` 18 | 19 | or 20 | 21 | ```shell 22 | yarn add @tsparticles/react 23 | ``` 24 | 25 | ### TypeScript Installation 26 | 27 | ```shell 28 | npm install @tsparticles/react @tsparticles/engine 29 | ``` 30 | 31 | or 32 | 33 | ```shell 34 | yarn add @tsparticles/react @tsparticles/engine 35 | ``` 36 | 37 | [@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`. 38 | 39 | ### create-react-app 40 | 41 | Starting from version 1.17.0 there are two official `create-react-app` templates: 42 | 43 | - `cra-template-particles`: Simple ReactJS template with full screen particles, using JavaScript 44 | - `cra-template-particles-typescript`: Simple ReactJS template with full screen particles, using TypeScript 45 | 46 | You can simply install them using the `create-react-app` command like this: 47 | 48 | ```shell 49 | $ create-react-app your_app --template particles 50 | ``` 51 | 52 | or 53 | 54 | ```shell 55 | $ create-react-app your_app --template particles-typescript 56 | ``` 57 | 58 | ## How to use 59 | 60 | ### Code 61 | 62 | Examples: 63 | 64 | #### Options object 65 | 66 | ##### JavaScript support - object 67 | 68 | ```jsx 69 | import { useEffect, useMemo, useState } from "react"; 70 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 71 | // import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 72 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 73 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 74 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 75 | 76 | const App = () => { 77 | const [init, setInit] = useState(false); 78 | 79 | // this should be run only once per application lifetime 80 | useEffect(() => { 81 | initParticlesEngine(async (engine) => { 82 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 83 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 84 | // starting from v2 you can add only the features you need reducing the bundle size 85 | //await loadAll(engine); 86 | //await loadFull(engine); 87 | await loadSlim(engine); 88 | //await loadBasic(engine); 89 | }).then(() => { 90 | setInit(true); 91 | }); 92 | }, []); 93 | 94 | const particlesLoaded = (container) => { 95 | console.log(container); 96 | }; 97 | 98 | const options = useMemo( 99 | () => ({ 100 | background: { 101 | color: { 102 | value: "#0d47a1", 103 | }, 104 | }, 105 | fpsLimit: 120, 106 | interactivity: { 107 | events: { 108 | onClick: { 109 | enable: true, 110 | mode: "push", 111 | }, 112 | onHover: { 113 | enable: true, 114 | mode: "repulse", 115 | }, 116 | }, 117 | modes: { 118 | push: { 119 | quantity: 4, 120 | }, 121 | repulse: { 122 | distance: 200, 123 | duration: 0.4, 124 | }, 125 | }, 126 | }, 127 | particles: { 128 | color: { 129 | value: "#ffffff", 130 | }, 131 | links: { 132 | color: "#ffffff", 133 | distance: 150, 134 | enable: true, 135 | opacity: 0.5, 136 | width: 1, 137 | }, 138 | move: { 139 | direction: "none", 140 | enable: true, 141 | outModes: { 142 | default: "bounce", 143 | }, 144 | random: false, 145 | speed: 6, 146 | straight: false, 147 | }, 148 | number: { 149 | density: { 150 | enable: true, 151 | }, 152 | value: 80, 153 | }, 154 | opacity: { 155 | value: 0.5, 156 | }, 157 | shape: { 158 | type: "circle", 159 | }, 160 | size: { 161 | value: { min: 1, max: 5 }, 162 | }, 163 | }, 164 | detectRetina: true, 165 | }), 166 | [], 167 | ); 168 | 169 | if (init) { 170 | return ( 171 | 176 | ); 177 | } 178 | 179 | return <>; 180 | }; 181 | ``` 182 | 183 | ##### TypeScript support - object 184 | 185 | ```tsx 186 | import { useEffect, useMemo, useState } from "react"; 187 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 188 | import { 189 | type Container, 190 | type ISourceOptions, 191 | MoveDirection, 192 | OutMode, 193 | } from "@tsparticles/engine"; 194 | // import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 195 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 196 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 197 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 198 | 199 | const App = () => { 200 | const [init, setInit] = useState(false); 201 | 202 | // this should be run only once per application lifetime 203 | useEffect(() => { 204 | initParticlesEngine(async (engine) => { 205 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 206 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 207 | // starting from v2 you can add only the features you need reducing the bundle size 208 | //await loadAll(engine); 209 | //await loadFull(engine); 210 | await loadSlim(engine); 211 | //await loadBasic(engine); 212 | }).then(() => { 213 | setInit(true); 214 | }); 215 | }, []); 216 | 217 | const particlesLoaded = async (container?: Container): Promise => { 218 | console.log(container); 219 | }; 220 | 221 | const options: ISourceOptions = useMemo( 222 | () => ({ 223 | background: { 224 | color: { 225 | value: "#0d47a1", 226 | }, 227 | }, 228 | fpsLimit: 120, 229 | interactivity: { 230 | events: { 231 | onClick: { 232 | enable: true, 233 | mode: "push", 234 | }, 235 | onHover: { 236 | enable: true, 237 | mode: "repulse", 238 | }, 239 | }, 240 | modes: { 241 | push: { 242 | quantity: 4, 243 | }, 244 | repulse: { 245 | distance: 200, 246 | duration: 0.4, 247 | }, 248 | }, 249 | }, 250 | particles: { 251 | color: { 252 | value: "#ffffff", 253 | }, 254 | links: { 255 | color: "#ffffff", 256 | distance: 150, 257 | enable: true, 258 | opacity: 0.5, 259 | width: 1, 260 | }, 261 | move: { 262 | direction: MoveDirection.none, 263 | enable: true, 264 | outModes: { 265 | default: OutMode.out, 266 | }, 267 | random: false, 268 | speed: 6, 269 | straight: false, 270 | }, 271 | number: { 272 | density: { 273 | enable: true, 274 | }, 275 | value: 80, 276 | }, 277 | opacity: { 278 | value: 0.5, 279 | }, 280 | shape: { 281 | type: "circle", 282 | }, 283 | size: { 284 | value: { min: 1, max: 5 }, 285 | }, 286 | }, 287 | detectRetina: true, 288 | }), 289 | [], 290 | ); 291 | 292 | if (init) { 293 | return ( 294 | 299 | ); 300 | } 301 | 302 | return <>; 303 | }; 304 | ``` 305 | 306 | #### Remote url 307 | 308 | ##### JavaScript support - url 309 | 310 | ```jsx 311 | import { useEffect, useState } from "react"; 312 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 313 | // import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 314 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 315 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 316 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 317 | 318 | const App = () => { 319 | const [init, setInit] = useState(false); 320 | 321 | // this should be run only once per application lifetime 322 | useEffect(() => { 323 | initParticlesEngine(async (engine) => { 324 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 325 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 326 | // starting from v2 you can add only the features you need reducing the bundle size 327 | //await loadAll(engine); 328 | //await loadFull(engine); 329 | await loadSlim(engine); 330 | //await loadBasic(engine); 331 | }).then(() => { 332 | setInit(true); 333 | }); 334 | }, []); 335 | 336 | const particlesLoaded = (container) => { 337 | console.log(container); 338 | }; 339 | 340 | if (init) { 341 | return ( 342 | 347 | ); 348 | } 349 | 350 | return <>; 351 | }; 352 | ``` 353 | 354 | ##### TypeScript support - url 355 | 356 | ```tsx 357 | import { useEffect, useState } from "react"; 358 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 359 | import type { Container } from "@tsparticles/engine"; 360 | // import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 361 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 362 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 363 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 364 | 365 | const App = () => { 366 | const [init, setInit] = useState(false); 367 | 368 | // this should be run only once per application lifetime 369 | useEffect(() => { 370 | initParticlesEngine(async (engine) => { 371 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 372 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 373 | // starting from v2 you can add only the features you need reducing the bundle size 374 | //await loadAll(engine); 375 | //await loadFull(engine); 376 | await loadSlim(engine); 377 | //await loadBasic(engine); 378 | }).then(() => { 379 | setInit(true); 380 | }); 381 | }, []); 382 | 383 | const particlesLoaded = async (container?: Container) => { 384 | console.log(container); 385 | }; 386 | 387 | if (init) { 388 | return ( 389 | 394 | ); 395 | } 396 | 397 | return <>; 398 | }; 399 | ``` 400 | 401 | ### Props 402 | 403 | | Prop | Type | Definition | 404 | | --------- | ------ | ---------------------------------------------------- | 405 | | id | string | The id of the element. | 406 | | width | string | The width of the canvas. | 407 | | height | string | The height of the canvas. | 408 | | options | object | The options of the particles instance. | 409 | | url | string | The remote options url, called using an AJAX request | 410 | | style | object | The style of the canvas element. | 411 | | className | string | The class name of the canvas wrapper. | 412 | 413 | #### particles.json 414 | 415 | Find all configuration 416 | options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html). 417 | 418 | You can find sample configurations [here](https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src) 📖 419 | 420 | ## Demos 421 | 422 | Preset demos can be found [here](https://particles.js.org/samples/presets/index.html) 423 | 424 | There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage) 425 | 426 | Report bugs and issues [here](https://github.com/tsparticles/tsparticles/issues) 427 | 428 | [tsParticle Website](https://particles.js.org) 429 | -------------------------------------------------------------------------------- /components/react/README.md: -------------------------------------------------------------------------------- 1 | [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) 2 | 3 | # @tsparticles/react 4 | 5 | [![npm](https://img.shields.io/npm/v/@tsparticles/react)](https://www.npmjs.com/package/@tsparticles/react) [![npm](https://img.shields.io/npm/dm/@tsparticles/react)](https://www.npmjs.com/package/@tsparticles/react) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) 6 | 7 | Official [tsParticles](https://github.com/tsparticles/tsparticles) ReactJS component 8 | 9 | [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles) 10 | 11 | [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 12 | 13 | ## Installation 14 | 15 | ```shell 16 | npm install @tsparticles/react 17 | ``` 18 | 19 | or 20 | 21 | ```shell 22 | yarn add @tsparticles/react 23 | ``` 24 | 25 | ### TypeScript Installation 26 | 27 | ```shell 28 | npm install @tsparticles/react @tsparticles/engine 29 | ``` 30 | 31 | or 32 | 33 | ```shell 34 | yarn add @tsparticles/react @tsparticles/engine 35 | ``` 36 | 37 | [@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`. 38 | 39 | ### create-react-app 40 | 41 | Starting from version 1.17.0 there are two official `create-react-app` templates: 42 | 43 | - `cra-template-particles`: Simple ReactJS template with full screen particles, using JavaScript 44 | - `cra-template-particles-typescript`: Simple ReactJS template with full screen particles, using TypeScript 45 | 46 | You can simply install them using the `create-react-app` command like this: 47 | 48 | ```shell 49 | $ create-react-app your_app --template particles 50 | ``` 51 | 52 | or 53 | 54 | ```shell 55 | $ create-react-app your_app --template particles-typescript 56 | ``` 57 | 58 | ## How to use 59 | 60 | ### Code 61 | 62 | Examples: 63 | 64 | #### Options object 65 | 66 | ##### JavaScript support - object 67 | 68 | ```jsx 69 | import { useEffect, useMemo, useState } from "react"; 70 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 71 | // import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 72 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 73 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 74 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 75 | 76 | const App = () => { 77 | const [init, setInit] = useState(false); 78 | 79 | // this should be run only once per application lifetime 80 | useEffect(() => { 81 | initParticlesEngine(async (engine) => { 82 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 83 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 84 | // starting from v2 you can add only the features you need reducing the bundle size 85 | //await loadAll(engine); 86 | //await loadFull(engine); 87 | await loadSlim(engine); 88 | //await loadBasic(engine); 89 | }).then(() => { 90 | setInit(true); 91 | }); 92 | }, []); 93 | 94 | const particlesLoaded = (container) => { 95 | console.log(container); 96 | }; 97 | 98 | const options = useMemo( 99 | () => ({ 100 | background: { 101 | color: { 102 | value: "#0d47a1", 103 | }, 104 | }, 105 | fpsLimit: 120, 106 | interactivity: { 107 | events: { 108 | onClick: { 109 | enable: true, 110 | mode: "push", 111 | }, 112 | onHover: { 113 | enable: true, 114 | mode: "repulse", 115 | }, 116 | }, 117 | modes: { 118 | push: { 119 | quantity: 4, 120 | }, 121 | repulse: { 122 | distance: 200, 123 | duration: 0.4, 124 | }, 125 | }, 126 | }, 127 | particles: { 128 | color: { 129 | value: "#ffffff", 130 | }, 131 | links: { 132 | color: "#ffffff", 133 | distance: 150, 134 | enable: true, 135 | opacity: 0.5, 136 | width: 1, 137 | }, 138 | move: { 139 | direction: "none", 140 | enable: true, 141 | outModes: { 142 | default: "bounce", 143 | }, 144 | random: false, 145 | speed: 6, 146 | straight: false, 147 | }, 148 | number: { 149 | density: { 150 | enable: true, 151 | }, 152 | value: 80, 153 | }, 154 | opacity: { 155 | value: 0.5, 156 | }, 157 | shape: { 158 | type: "circle", 159 | }, 160 | size: { 161 | value: { min: 1, max: 5 }, 162 | }, 163 | }, 164 | detectRetina: true, 165 | }), 166 | [], 167 | ); 168 | 169 | if (init) { 170 | return ( 171 | 176 | ); 177 | } 178 | 179 | return <>; 180 | }; 181 | ``` 182 | 183 | ##### TypeScript support - object 184 | 185 | ```tsx 186 | import { useEffect, useMemo, useState } from "react"; 187 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 188 | import { 189 | type Container, 190 | type ISourceOptions, 191 | MoveDirection, 192 | OutMode, 193 | } from "@tsparticles/engine"; 194 | // import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 195 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 196 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 197 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 198 | 199 | const App = () => { 200 | const [init, setInit] = useState(false); 201 | 202 | // this should be run only once per application lifetime 203 | useEffect(() => { 204 | initParticlesEngine(async (engine) => { 205 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 206 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 207 | // starting from v2 you can add only the features you need reducing the bundle size 208 | //await loadAll(engine); 209 | //await loadFull(engine); 210 | await loadSlim(engine); 211 | //await loadBasic(engine); 212 | }).then(() => { 213 | setInit(true); 214 | }); 215 | }, []); 216 | 217 | const particlesLoaded = async (container?: Container): Promise => { 218 | console.log(container); 219 | }; 220 | 221 | const options: ISourceOptions = useMemo( 222 | () => ({ 223 | background: { 224 | color: { 225 | value: "#0d47a1", 226 | }, 227 | }, 228 | fpsLimit: 120, 229 | interactivity: { 230 | events: { 231 | onClick: { 232 | enable: true, 233 | mode: "push", 234 | }, 235 | onHover: { 236 | enable: true, 237 | mode: "repulse", 238 | }, 239 | }, 240 | modes: { 241 | push: { 242 | quantity: 4, 243 | }, 244 | repulse: { 245 | distance: 200, 246 | duration: 0.4, 247 | }, 248 | }, 249 | }, 250 | particles: { 251 | color: { 252 | value: "#ffffff", 253 | }, 254 | links: { 255 | color: "#ffffff", 256 | distance: 150, 257 | enable: true, 258 | opacity: 0.5, 259 | width: 1, 260 | }, 261 | move: { 262 | direction: MoveDirection.none, 263 | enable: true, 264 | outModes: { 265 | default: OutMode.out, 266 | }, 267 | random: false, 268 | speed: 6, 269 | straight: false, 270 | }, 271 | number: { 272 | density: { 273 | enable: true, 274 | }, 275 | value: 80, 276 | }, 277 | opacity: { 278 | value: 0.5, 279 | }, 280 | shape: { 281 | type: "circle", 282 | }, 283 | size: { 284 | value: { min: 1, max: 5 }, 285 | }, 286 | }, 287 | detectRetina: true, 288 | }), 289 | [], 290 | ); 291 | 292 | if (init) { 293 | return ( 294 | 299 | ); 300 | } 301 | 302 | return <>; 303 | }; 304 | ``` 305 | 306 | #### Remote url 307 | 308 | ##### JavaScript support - url 309 | 310 | ```jsx 311 | import { useEffect, useState } from "react"; 312 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 313 | // import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 314 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 315 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 316 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 317 | 318 | const App = () => { 319 | const [init, setInit] = useState(false); 320 | 321 | // this should be run only once per application lifetime 322 | useEffect(() => { 323 | initParticlesEngine(async (engine) => { 324 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 325 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 326 | // starting from v2 you can add only the features you need reducing the bundle size 327 | //await loadAll(engine); 328 | //await loadFull(engine); 329 | await loadSlim(engine); 330 | //await loadBasic(engine); 331 | }).then(() => { 332 | setInit(true); 333 | }); 334 | }, []); 335 | 336 | const particlesLoaded = (container) => { 337 | console.log(container); 338 | }; 339 | 340 | if (init) { 341 | return ( 342 | 347 | ); 348 | } 349 | 350 | return <>; 351 | }; 352 | ``` 353 | 354 | ##### TypeScript support - url 355 | 356 | ```tsx 357 | import { useEffect, useState } from "react"; 358 | import Particles, { initParticlesEngine } from "@tsparticles/react"; 359 | import type { Container } from "@tsparticles/engine"; 360 | // import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too. 361 | // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. 362 | import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. 363 | // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too. 364 | 365 | const App = () => { 366 | const [init, setInit] = useState(false); 367 | 368 | // this should be run only once per application lifetime 369 | useEffect(() => { 370 | initParticlesEngine(async (engine) => { 371 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 372 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 373 | // starting from v2 you can add only the features you need reducing the bundle size 374 | //await loadAll(engine); 375 | //await loadFull(engine); 376 | await loadSlim(engine); 377 | //await loadBasic(engine); 378 | }).then(() => { 379 | setInit(true); 380 | }); 381 | }, []); 382 | 383 | const particlesLoaded = (container?: Container) => { 384 | console.log(container); 385 | }; 386 | 387 | if (init) { 388 | return ( 389 | 394 | ); 395 | } 396 | 397 | return <>; 398 | }; 399 | ``` 400 | 401 | ### Props 402 | 403 | | Prop | Type | Definition | 404 | | --------- | ------ | ---------------------------------------------------- | 405 | | id | string | The id of the element. | 406 | | width | string | The width of the canvas. | 407 | | height | string | The height of the canvas. | 408 | | options | object | The options of the particles instance. | 409 | | url | string | The remote options url, called using an AJAX request | 410 | | style | object | The style of the canvas element. | 411 | | className | string | The class name of the canvas wrapper. | 412 | 413 | #### particles.json 414 | 415 | Find all configuration 416 | options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html). 417 | 418 | You can find sample configurations [here](https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src) 📖 419 | 420 | ## Demos 421 | 422 | Preset demos can be found [here](https://particles.js.org/samples/presets/index.html) 423 | 424 | There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage) 425 | 426 | Report bugs and issues [here](https://github.com/tsparticles/tsparticles/issues) 427 | 428 | [tsParticle Website](https://particles.js.org) 429 | -------------------------------------------------------------------------------- /templates/react/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [3.0.0](https://github.com/tsparticles/react/compare/v2.12.2...v3.0.0) (2023-12-07) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * fixed component, it was refreshing infinite times for a bug. now it works perfectly ([4ef5e81](https://github.com/tsparticles/react/commit/4ef5e8197f1364e3a62c8262ae04c9272457047a)) 12 | 13 | 14 | ### Features 15 | 16 | * added particles setup function (name not definitive), updated to v3 ([e164c66](https://github.com/tsparticles/react/commit/e164c669b515d30057059ef8f7a8d35ff562b5e3)) 17 | 18 | 19 | 20 | 21 | 22 | ## [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.12.1...v3.0.0-beta.1) (2023-08-11) 23 | 24 | **Note:** Version bump only for package cra-template-particles 25 | 26 | 27 | 28 | 29 | 30 | ## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04) 31 | 32 | **Note:** Version bump only for package cra-template-particles 33 | 34 | 35 | 36 | 37 | 38 | # [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04) 39 | 40 | **Note:** Version bump only for package cra-template-particles 41 | 42 | 43 | 44 | 45 | 46 | # [2.11.0](https://github.com/tsparticles/react/compare/v2.10.1...v2.11.0) (2023-07-14) 47 | 48 | **Note:** Version bump only for package cra-template-particles 49 | 50 | 51 | 52 | 53 | 54 | ## 2.10.1 (2023-06-04) 55 | 56 | 57 | ### Features 58 | 59 | * updated templates to React 18 ([d9ae354](https://github.com/tsparticles/react/commit/d9ae354d71f245e85009c96007bd59df7bd422c8)) 60 | 61 | 62 | 63 | 64 | 65 | ## [2.9.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.9.2...cra-template-particles@2.9.3) (2023-02-12) 66 | 67 | **Note:** Version bump only for package cra-template-particles 68 | 69 | ## [2.9.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.9.1...cra-template-particles@2.9.2) (2023-02-12) 70 | 71 | **Note:** Version bump only for package cra-template-particles 72 | 73 | ## [2.9.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.9.0...cra-template-particles@2.9.1) (2023-02-11) 74 | 75 | **Note:** Version bump only for package cra-template-particles 76 | 77 | # [2.9.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.8.0...cra-template-particles@2.9.0) (2023-02-10) 78 | 79 | **Note:** Version bump only for package cra-template-particles 80 | 81 | # [2.8.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.7.1...cra-template-particles@2.8.0) (2023-01-18) 82 | 83 | **Note:** Version bump only for package cra-template-particles 84 | 85 | ## [2.7.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.7.0...cra-template-particles@2.7.1) (2022-12-25) 86 | 87 | **Note:** Version bump only for package cra-template-particles 88 | 89 | # [2.7.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.6.0...cra-template-particles@2.7.0) (2022-12-23) 90 | 91 | ### Features 92 | 93 | - 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)) 94 | 95 | # [2.6.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.3...cra-template-particles@2.6.0) (2022-12-06) 96 | 97 | ### Bug Fixes 98 | 99 | - **deps:** update dependency fs-extra to v11 ([e82352a](https://github.com/tsparticles/tsparticles/commit/e82352a685960603a58fb222f91d157ee65967de)) 100 | 101 | ## [2.5.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.2...cra-template-particles@2.5.3) (2022-11-07) 102 | 103 | **Note:** Version bump only for package cra-template-particles 104 | 105 | ## [2.5.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.1...cra-template-particles@2.5.2) (2022-11-07) 106 | 107 | **Note:** Version bump only for package cra-template-particles 108 | 109 | ## [2.5.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.5.0...cra-template-particles@2.5.1) (2022-11-03) 110 | 111 | **Note:** Version bump only for package cra-template-particles 112 | 113 | # [2.5.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.4.0...cra-template-particles@2.5.0) (2022-11-02) 114 | 115 | **Note:** Version bump only for package cra-template-particles 116 | 117 | # [2.4.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.4...cra-template-particles@2.4.0) (2022-10-30) 118 | 119 | ### Features 120 | 121 | - removed all canvas context save/restore calls ([208722f](https://github.com/tsparticles/tsparticles/commit/208722f0a521246165b7cdc529dfbfbd7a3cf7eb)) 122 | 123 | ## [2.3.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.3...cra-template-particles@2.3.4) (2022-09-30) 124 | 125 | **Note:** Version bump only for package cra-template-particles 126 | 127 | ## [2.3.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.2...cra-template-particles@2.3.3) (2022-09-30) 128 | 129 | **Note:** Version bump only for package cra-template-particles 130 | 131 | ## [2.3.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.1...cra-template-particles@2.3.2) (2022-09-21) 132 | 133 | **Note:** Version bump only for package cra-template-particles 134 | 135 | ## [2.3.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.3.0...cra-template-particles@2.3.1) (2022-09-13) 136 | 137 | **Note:** Version bump only for package cra-template-particles 138 | 139 | # [2.3.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.4...cra-template-particles@2.3.0) (2022-09-11) 140 | 141 | **Note:** Version bump only for package cra-template-particles 142 | 143 | ## [2.2.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.2...cra-template-particles@2.2.4) (2022-08-26) 144 | 145 | **Note:** Version bump only for package cra-template-particles 146 | 147 | ## [2.2.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.2...cra-template-particles@2.2.3) (2022-08-21) 148 | 149 | **Note:** Version bump only for package cra-template-particles 150 | 151 | ## [2.2.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.1...cra-template-particles@2.2.2) (2022-08-16) 152 | 153 | ### Bug Fixes 154 | 155 | - 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)) 156 | 157 | ## [2.2.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.2.0...cra-template-particles@2.2.1) (2022-08-12) 158 | 159 | **Note:** Version bump only for package cra-template-particles 160 | 161 | # [2.2.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.4...cra-template-particles@2.2.0) (2022-08-11) 162 | 163 | **Note:** Version bump only for package cra-template-particles 164 | 165 | ## [2.1.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.3...cra-template-particles@2.1.4) (2022-07-28) 166 | 167 | ### Features 168 | 169 | - preparing @tsparticles/react and switching alternate packages ([49e749e](https://github.com/tsparticles/tsparticles/commit/49e749e90e076f0cb22eefe0f3399102f5b9fb35)) 170 | 171 | ## [2.1.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.2...cra-template-particles@2.1.3) (2022-07-01) 172 | 173 | **Note:** Version bump only for package cra-template-particles 174 | 175 | ## [2.1.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.1...cra-template-particles@2.1.2) (2022-07-01) 176 | 177 | **Note:** Version bump only for package cra-template-particles 178 | 179 | ## [2.1.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.1.0...cra-template-particles@2.1.1) (2022-07-01) 180 | 181 | **Note:** Version bump only for package cra-template-particles 182 | 183 | # [2.1.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.6...cra-template-particles@2.1.0) (2022-06-18) 184 | 185 | ### Bug Fixes 186 | 187 | - **deps:** update dependency @capacitor/core to v3.5.0 ([581bb7e](https://github.com/tsparticles/tsparticles/commit/581bb7e2f4f6aceb3535daf9223954a80f2daa81)) 188 | 189 | ## [2.0.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.5...cra-template-particles@2.0.6) (2022-04-16) 190 | 191 | **Note:** Version bump only for package cra-template-particles 192 | 193 | ## [2.0.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.4...cra-template-particles@2.0.5) (2022-04-14) 194 | 195 | **Note:** Version bump only for package cra-template-particles 196 | 197 | ## [2.0.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.43.1...cra-template-particles@2.0.4) (2022-04-06) 198 | 199 | ### Features 200 | 201 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 202 | 203 | ## [2.0.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.1...cra-template-particles@2.0.3) (2022-03-11) 204 | 205 | ### Features 206 | 207 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 208 | 209 | ## [2.0.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.4...cra-template-particles@2.0.2) (2022-02-21) 210 | 211 | ### Features 212 | 213 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 214 | 215 | ## [1.43.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.43.0...cra-template-particles@1.43.1) (2022-04-06) 216 | 217 | **Note:** Version bump only for package cra-template-particles 218 | 219 | # [1.43.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.4...cra-template-particles@1.43.0) (2022-04-04) 220 | 221 | **Note:** Version bump only for package cra-template-particles 222 | 223 | ## [1.42.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.3...cra-template-particles@1.42.4) (2022-03-20) 224 | 225 | **Note:** Version bump only for package cra-template-particles 226 | 227 | ## [1.42.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.2...cra-template-particles@1.42.3) (2022-03-18) 228 | 229 | **Note:** Version bump only for package cra-template-particles 230 | 231 | ## [1.42.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.1...cra-template-particles@1.42.2) (2022-03-14) 232 | 233 | **Note:** Version bump only for package cra-template-particles 234 | 235 | ## [1.42.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.42.0...cra-template-particles@1.42.1) (2022-03-09) 236 | 237 | **Note:** Version bump only for package cra-template-particles 238 | 239 | # [1.42.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.6...cra-template-particles@1.42.0) (2022-03-08) 240 | 241 | **Note:** Version bump only for package cra-template-particles 242 | 243 | ## [2.0.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@2.0.0...cra-template-particles@2.0.1) (2022-02-15) 244 | 245 | ## [1.41.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.5...cra-template-particles@1.41.6) (2022-03-03) 246 | 247 | **Note:** Version bump only for package cra-template-particles 248 | 249 | ## [1.41.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.4...cra-template-particles@1.41.5) (2022-02-24) 250 | 251 | **Note:** Version bump only for package cra-template-particles 252 | 253 | ## [1.41.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.3...cra-template-particles@1.41.4) (2022-02-20) 254 | 255 | **Note:** Version bump only for package cra-template-particles 256 | 257 | ## [1.41.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.2...cra-template-particles@1.41.3) (2022-02-19) 258 | 259 | **Note:** Version bump only for package cra-template-particles 260 | 261 | ## [1.41.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.1...cra-template-particles@1.41.2) (2022-02-16) 262 | 263 | **Note:** Version bump only for package cra-template-particles 264 | 265 | # [2.0.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.1...cra-template-particles@2.0.0) (2022-02-15) 266 | 267 | ### Features 268 | 269 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 270 | 271 | # [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) 272 | 273 | ## [1.41.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.41.0...cra-template-particles@1.41.1) (2022-02-14) 274 | 275 | **Note:** Version bump only for package cra-template-particles 276 | 277 | # [1.41.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.40.2...cra-template-particles@1.41.0) (2022-02-10) 278 | 279 | **Note:** Version bump only for package cra-template-particles 280 | 281 | ## [1.40.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.40.1...cra-template-particles@1.40.2) (2022-02-07) 282 | 283 | **Note:** Version bump only for package cra-template-particles 284 | 285 | ## [1.40.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.40.0...cra-template-particles@1.40.1) (2022-02-06) 286 | 287 | **Note:** Version bump only for package cra-template-particles 288 | 289 | # [1.40.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.3...cra-template-particles@1.40.0) (2022-02-04) 290 | 291 | **Note:** Version bump only for package cra-template-particles 292 | 293 | ## [1.22.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.2...cra-template-particles@1.22.3) (2022-02-02) 294 | 295 | ### Features 296 | 297 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 298 | - updated fpsLimit default value to 120 build: updated all presets to have a fpsLimit of 120 ([d1eff05](https://github.com/tsparticles/tsparticles/commit/d1eff050224c4d65727c0abc3f100d70d3807eb8)) 299 | 300 | # [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) 301 | 302 | ## [1.22.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.1...cra-template-particles@1.22.2) (2022-01-29) 303 | 304 | **Note:** Version bump only for package cra-template-particles 305 | 306 | ## [1.22.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.22.0...cra-template-particles@1.22.1) (2022-01-26) 307 | 308 | **Note:** Version bump only for package cra-template-particles 309 | 310 | # [1.22.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.21.0...cra-template-particles@1.22.0) (2022-01-08) 311 | 312 | **Note:** Version bump only for package cra-template-particles 313 | 314 | # [1.21.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.6...cra-template-particles@1.21.0) (2021-12-29) 315 | 316 | **Note:** Version bump only for package cra-template-particles 317 | 318 | ## [1.20.6](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.5...cra-template-particles@1.20.6) (2021-12-24) 319 | 320 | **Note:** Version bump only for package cra-template-particles 321 | 322 | # [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) 323 | 324 | ### Features 325 | 326 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 327 | 328 | # [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) 329 | 330 | ### Features 331 | 332 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 333 | 334 | # [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) 335 | 336 | ## [1.20.5](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.4...cra-template-particles@1.20.5) (2021-11-28) 337 | 338 | **Note:** Version bump only for package cra-template-particles 339 | 340 | ## [1.20.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.3...cra-template-particles@1.20.4) (2021-11-17) 341 | 342 | **Note:** Version bump only for package cra-template-particles 343 | 344 | ## [1.20.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.2...cra-template-particles@1.20.3) (2021-11-05) 345 | 346 | **Note:** Version bump only for package cra-template-particles 347 | 348 | ## [1.20.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.1...cra-template-particles@1.20.2) (2021-10-31) 349 | 350 | **Note:** Version bump only for package cra-template-particles 351 | 352 | ## [1.20.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.20.0...cra-template-particles@1.20.1) (2021-10-30) 353 | 354 | **Note:** Version bump only for package cra-template-particles 355 | 356 | # [1.20.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.19.0...cra-template-particles@1.20.0) (2021-10-28) 357 | 358 | **Note:** Version bump only for package cra-template-particles 359 | 360 | # [1.19.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.4...cra-template-particles@1.19.0) (2021-10-14) 361 | 362 | **Note:** Version bump only for package cra-template-particles 363 | 364 | ## [1.18.4](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.3...cra-template-particles@1.18.4) (2021-10-06) 365 | 366 | **Note:** Version bump only for package cra-template-particles 367 | 368 | # [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) 369 | 370 | ### Features 371 | 372 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/tsparticles/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 373 | 374 | ## [1.18.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.2...cra-template-particles@1.18.3) (2021-10-03) 375 | 376 | **Note:** Version bump only for package cra-template-particles 377 | 378 | ## [1.18.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.1...cra-template-particles@1.18.2) (2021-09-27) 379 | 380 | **Note:** Version bump only for package cra-template-particles 381 | 382 | ## [1.18.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.18.0...cra-template-particles@1.18.1) (2021-09-20) 383 | 384 | **Note:** Version bump only for package cra-template-particles 385 | 386 | # [1.18.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.17.1...cra-template-particles@1.18.0) (2021-09-18) 387 | 388 | **Note:** Version bump only for package cra-template-particles 389 | 390 | ## [1.17.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.17.0...cra-template-particles@1.17.1) (2021-09-15) 391 | 392 | **Note:** Version bump only for package cra-template-particles 393 | 394 | # [1.17.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.3...cra-template-particles@1.17.0) (2021-08-23) 395 | 396 | **Note:** Version bump only for package cra-template-particles 397 | 398 | ## [1.16.3](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.2...cra-template-particles@1.16.3) (2021-08-10) 399 | 400 | **Note:** Version bump only for package cra-template-particles 401 | 402 | ## [1.16.2](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.1...cra-template-particles@1.16.2) (2021-07-31) 403 | 404 | **Note:** Version bump only for package cra-template-particles 405 | 406 | ## [1.16.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.16.0...cra-template-particles@1.16.1) (2021-07-29) 407 | 408 | **Note:** Version bump only for package cra-template-particles 409 | 410 | # [1.16.0](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.15.0...cra-template-particles@1.16.0) (2021-07-29) 411 | 412 | **Note:** Version bump only for package cra-template-particles 413 | 414 | ## [1.1.1](https://github.com/tsparticles/tsparticles/compare/cra-template-particles@1.1.0...cra-template-particles@1.1.1) (2020-10-06) 415 | 416 | **Note:** Version bump only for package cra-template-particles 417 | 418 | # [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) 419 | 420 | **Note:** Version bump only for package cra-template-particles 421 | 422 | # [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) 423 | 424 | **Note:** Version bump only for package cra-template-particles 425 | 426 | # [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) 427 | 428 | **Note:** Version bump only for package cra-template-particles 429 | 430 | # [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) 431 | 432 | **Note:** Version bump only for package cra-template-particles 433 | 434 | # [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) 435 | 436 | **Note:** Version bump only for package cra-template-particles 437 | 438 | # [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) 439 | 440 | **Note:** Version bump only for package cra-template-particles 441 | 442 | # [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) 443 | 444 | **Note:** Version bump only for package cra-template-particles 445 | 446 | # [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) 447 | 448 | **Note:** Version bump only for package cra-template-particles 449 | 450 | # [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) 451 | 452 | **Note:** Version bump only for package cra-template-particles 453 | 454 | # [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) 455 | 456 | **Note:** Version bump only for package cra-template-particles 457 | 458 | # [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) 459 | 460 | **Note:** Version bump only for package cra-template-particles 461 | 462 | # [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) 463 | 464 | **Note:** Version bump only for package cra-template-particles 465 | 466 | # [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) 467 | 468 | **Note:** Version bump only for package cra-template-particles 469 | 470 | # [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) 471 | 472 | **Note:** Version bump only for package cra-template-particles 473 | 474 | # [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) 475 | 476 | **Note:** Version bump only for package cra-template-particles 477 | 478 | # [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) 479 | 480 | **Note:** Version bump only for package cra-template-particles 481 | 482 | # [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) 483 | 484 | **Note:** Version bump only for package cra-template-particles 485 | 486 | # [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) 487 | 488 | **Note:** Version bump only for package cra-template-particles 489 | 490 | # [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) 491 | 492 | **Note:** Version bump only for package cra-template-particles 493 | 494 | # [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) 495 | 496 | **Note:** Version bump only for package cra-template-particles 497 | 498 | # [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) 499 | 500 | **Note:** Version bump only for package cra-template-particles 501 | 502 | # [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) 503 | 504 | **Note:** Version bump only for package cra-template-particles 505 | --------------------------------------------------------------------------------