Skip to content

Commit 7b96390

Browse files
matteobrunimatteobruni
authored
Merge pull request #50 from tsparticles/dev
Version 3.0.0
2 parents d7ae266 + 06ad7ff commit 7b96390

File tree

118 files changed

+6995
-10861
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+6995
-10861
lines changed

‎.github/workflows/nodejs.yml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ jobs:
2828
# uses: nrwl/nx-set-shas@v3
2929
- uses: actions/setup-node@v4
3030
with:
31-
node-version: '16'
31+
node-version: '20'
3232
- uses: pnpm/action-setup@v2.4.0
3333
name: Install pnpm
3434
id: pnpm-install
@@ -55,7 +55,7 @@ jobs:
5555
- run: pnpm install --no-frozen-lockfile
5656
#- run: npx nx-cloud start-ci-run
5757
#- run: pnpm run prettify:ci:readme
58-
- run: npx lerna run build:ci #--concurrency 3
58+
- run: pnpm run build:ci #--concurrency 3
5959
#- run: npx nx-cloud stop-all-agents
6060
pr:
6161
runs-on: ubuntu-latest
@@ -70,7 +70,7 @@ jobs:
7070
# uses: nrwl/nx-set-shas@v3
7171
- uses: actions/setup-node@v4
7272
with:
73-
node-version: '16'
73+
node-version: '20'
7474
- uses: pnpm/action-setup@v2.4.0
7575
name: Install pnpm
7676
id: pnpm-install
@@ -97,7 +97,7 @@ jobs:
9797
- run: pnpm install --no-frozen-lockfile
9898
#- run: npx nx-cloud start-ci-run
9999
#- run: pnpm run prettify:ci:readme
100-
- run: npx lerna run build:ci #--concurrency 3
100+
- run: pnpm run build:ci #--concurrency 3
101101
#- run: npx nx-cloud stop-all-agents
102102
- run: echo ${{ github.repository_owner }}
103103
- run: echo ${{ github.actor }}
@@ -113,7 +113,7 @@ jobs:
113113
# - uses: actions/checkout@v3
114114
# - uses: actions/setup-node@v3
115115
# with:
116-
# node-version: '16'
116+
# node-version: '20'
117117
# - uses: pnpm/action-setup@v2.2.2
118118
# name: Install pnpm
119119
# id: pnpm-install

‎CHANGELOG.md‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,25 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6-
## [2.12.2](https://github.com/tsparticles/react/compare/v2.12.1...v2.12.2) (2023-08-11)
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)
725

826

927
### Bug Fixes
@@ -14,15 +32,15 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
1432

1533

1634

17-
## [2.12.1](https://github.com/tsparticles/react/compare/v2.12.0...v2.12.1) (2023-08-04)
35+
## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)
1836

19-
**Note:** Version bump only for package react-particles-workspace
37+
**Note:** Version bump only for package @tsparticles/react-workspace
2038

2139

2240

2341

2442

25-
# [2.12.0](https://github.com/tsparticles/react/compare/v2.11.0...v2.12.0) (2023-08-04)
43+
# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)
2644

2745

2846
### Bug Fixes

‎README.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
22

3-
# react-particles
3+
# @tsparticles/react
44

5-
[![npm](https://img.shields.io/npm/v/react-particles)](https://www.npmjs.com/package/react-particles) [![npm](https://img.shields.io/npm/dm/react-particles)](https://www.npmjs.com/package/react-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
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)
66

7-
Official [tsParticles](https://github.com/matteobruni/tsparticles) ReactJS component
7+
Official [tsParticles](https://github.com/tsparticles/tsparticles) ReactJS component
88

99
[![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)
1010

@@ -13,13 +13,13 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) ReactJS compo
1313
## Installation
1414

1515
```shell
16-
npm install react-particles
16+
npm install @tsparticles/react
1717
```
1818

1919
or
2020

2121
```shell
22-
yarn add react-particles
22+
yarn add @tsparticles/react
2323
```
2424

2525
### create-react-app
@@ -53,9 +53,9 @@ Examples:
5353

5454
```jsx
5555
import { useCallback } from "react";
56-
import Particles from "react-particles";
56+
import Particles from "@tsparticles/react";
5757
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
58-
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
58+
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
5959

6060
const App = () => {
6161
const particlesInit = useCallback(async engine => {
@@ -81,10 +81,10 @@ const App = () => {
8181

8282
```typescript jsx
8383
import { useCallback } from "react";
84-
import Particles from "react-particles";
85-
import type { Container, Engine } from "tsparticles-engine";
84+
import Particles from "@tsparticles/react";
85+
import type { Container, Engine } from "@tsparticles/engine";
8686
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
87-
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
87+
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
8888

8989
const App = () => {
9090
const particlesInit = useCallback(async (engine: Engine) => {
@@ -113,9 +113,9 @@ const App = () => {
113113

114114
```jsx
115115
import { useCallback } from "react";
116-
import Particles from "react-particles";
116+
import Particles from "@tsparticles/react";
117117
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
118-
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
118+
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
119119

120120
const App = () => {
121121
const particlesInit = useCallback(async engine => {
@@ -214,10 +214,10 @@ const App = () => {
214214

215215
```typescript jsx
216216
import { useCallback } from "react";
217-
import type { Container, Engine } from "tsparticles-engine";
218-
import Particles from "react-particles";
217+
import type { Container, Engine } from "@tsparticles/engine";
218+
import Particles from "@tsparticles/react";
219219
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
220-
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
220+
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
221221

222222
const App = () => {
223223
const particlesInit = useCallback(async (engine: Engine) => {
@@ -332,14 +332,14 @@ const App = () => {
332332

333333
Find all configuration options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
334334

335-
You can find sample configurations [here](https://github.com/matteobruni/tsparticles/tree/main/utils/configs/src) 📖
335+
You can find sample configurations [here](https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src) 📖
336336

337337
## Demos
338338

339339
Preset demos can be found [here](https://particles.js.org/samples/presets/index.html)
340340

341341
There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
342342

343-
Report bugs and issues [here](https://github.com/matteobruni/tsparticles/issues)
343+
Report bugs and issues [here](https://github.com/tsparticles/tsparticles/issues)
344344

345345
[tsParticle Website](https://particles.js.org)

‎apps/nextjs-beta/CHANGELOG.md‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,39 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6-
## [2.12.2](https://github.com/tsparticles/react/compare/v2.12.1...v2.12.2) (2023-08-11)
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)
723

824
**Note:** Version bump only for package nextjs-beta-demo
925

1026

1127

1228

1329

14-
## [2.12.1](https://github.com/tsparticles/react/compare/v2.12.0...v2.12.1) (2023-08-04)
30+
## [2.12.1](https://github.com/tsparticles/react/compare/v3.0.0-beta.1...v2.12.1) (2023-08-04)
1531

1632
**Note:** Version bump only for package nextjs-beta-demo
1733

1834

1935

2036

2137

22-
# [2.12.0](https://github.com/tsparticles/react/compare/v2.11.0...v2.12.0) (2023-08-04)
38+
# [3.0.0-beta.1](https://github.com/tsparticles/react/compare/v2.11.0...v3.0.0-beta.1) (2023-08-04)
2339

2440
**Note:** Version bump only for package nextjs-beta-demo
2541

@@ -53,23 +69,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
5369

5470

5571

56-
## [0.3.3](https://github.com/matteobruni/tsparticles/compare/nextjs-beta-demo@0.3.2...nextjs-beta-demo@0.3.3) (2023-02-12)
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)
5773

5874
**Note:** Version bump only for package nextjs-beta-demo
5975

60-
## [0.3.2](https://github.com/matteobruni/tsparticles/compare/nextjs-beta-demo@0.3.1...nextjs-beta-demo@0.3.2) (2023-02-12)
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)
6177

6278
**Note:** Version bump only for package nextjs-beta-demo
6379

64-
## [0.3.1](https://github.com/matteobruni/tsparticles/compare/nextjs-beta-demo@0.3.0...nextjs-beta-demo@0.3.1) (2023-02-11)
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)
6581

6682
**Note:** Version bump only for package nextjs-beta-demo
6783

68-
# [0.3.0](https://github.com/matteobruni/tsparticles/compare/nextjs-beta-demo@0.2.0...nextjs-beta-demo@0.3.0) (2023-02-10)
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)
6985

7086
**Note:** Version bump only for package nextjs-beta-demo
7187

72-
# [0.2.0](https://github.com/matteobruni/tsparticles/compare/nextjs-beta-demo@0.1.1...nextjs-beta-demo@0.2.0) (2023-01-18)
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)
7389

7490
**Note:** Version bump only for package nextjs-beta-demo
7591

‎apps/nextjs-beta/app/layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import './globals.css'
1+
import "./globals.css";
22

33
export default function RootLayout({
44
children,
55
}: {
6-
children: React.ReactNode
6+
children: React.ReactNode;
77
}) {
88
return (
99
<html lang="en">
@@ -14,5 +14,5 @@ export default function RootLayout({
1414
<head />
1515
<body>{children}</body>
1616
</html>
17-
)
17+
);
1818
}

‎apps/nextjs-beta/app/page.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
1-
import Image from 'next/image'
2-
import { Inter } from '@next/font/google'
3-
import styles from './page.module.css'
4-
import Particles from './particles'
1+
"use client";
52

6-
const inter = Inter({ subsets: [ 'latin' ] })
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" ] });
713

814
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+
925
return (
1026
<main className={styles.main}>
11-
<Particles id="tsparticles" />
27+
<Particles id="tsparticles" done={init}/>
1228
<div className={styles.description}>
1329
<p>
1430
Get started by editing&nbsp;
@@ -20,7 +36,7 @@ export default function Home() {
2036
target="_blank"
2137
rel="noopener noreferrer"
2238
>
23-
By{' '}
39+
By{" "}
2440
<Image
2541
src="/vercel.svg"
2642
alt="Vercel Logo"
@@ -89,5 +105,5 @@ export default function Home() {
89105
</a>
90106
</div>
91107
</main>
92-
)
108+
);
93109
}

‎apps/nextjs-beta/app/particles.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
"use client";
22

3-
import { loadFull } from "tsparticles";
4-
import Particles from "react-particles";
5-
import { useCallback } from "react";
6-
import { Engine } from "tsparticles-engine";
7-
import configs from "tsparticles-demo-configs";
3+
import Particles from "@tsparticles/react";
4+
import configs from "@tsparticles/configs";
85

9-
export default function ParticlesComponent(props: { id: string }) {
10-
const particlesInit = useCallback(async (engine: Engine) => {
11-
await loadFull(engine);
12-
}, []);
13-
14-
return <Particles id={props.id} init={particlesInit} options={configs.basic} />;
15-
};
6+
export default function ParticlesComponent(props: {
7+
id: string;
8+
done: boolean;
9+
}) {
10+
return props.done && <Particles id={props.id} options={configs.basic}/>;
11+
}

‎apps/nextjs-beta/package.json‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
{
22
"name": "nextjs-beta-demo",
3-
"version": "2.12.2",
3+
"version": "3.0.0",
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
77
"build": "next build",
8+
"build:ci": "next build",
89
"start": "next start",
910
"lint": "next lint"
1011
},
1112
"dependencies": {
12-
"@next/font": "^13.4.12",
13-
"@types/node": "^20.4.7",
14-
"@types/react": "^18.2.18",
15-
"@types/react-dom": "^18.2.7",
16-
"eslint": "^8.46.0",
17-
"eslint-config-next": "^13.4.12",
18-
"next": "^13.4.12",
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",
1923
"react": "^18.2.0",
2024
"react-dom": "^18.2.0",
21-
"react-particles": "^2.12.2",
22-
"tsparticles": "^2.12.0",
23-
"tsparticles-demo-configs": "^2.12.0",
24-
"tsparticles-engine": "^2.12.0",
25-
"typescript": "^5.1.6"
25+
"tsparticles": "^3.0.2",
26+
"typescript": "^5.3.3"
2627
}
2728
}

0 commit comments

Comments
 (0)