Skip to content

Commit 6f0231e

Browse files
committed
build: updated deps, and changing init api again, maybe this is the latest version
1 parent 8be2431 commit 6f0231e

Some content is hidden

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

58 files changed

+3164
-3413
lines changed

apps/nextjs-beta/app/page.tsx

Lines changed: 92 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -4,99 +4,106 @@ import Image from "next/image";
44
import { Inter } from "@next/font/google";
55
import styles from "./page.module.css";
66
import Particles from "./particles";
7-
import { useParticlesPlugins } from "@tsparticles/react";
7+
import { useEffect, useState } from "react";
8+
import { initParticlesEngine } from "@tsparticles/react";
89
import { loadFull } from "tsparticles";
910
import { Engine } from "@tsparticles/engine";
1011

11-
const inter = Inter({ subsets: ["latin"] });
12+
const inter = Inter({ subsets: [ "latin" ] });
1213

1314
export default function Home() {
14-
const { done } = useParticlesPlugins(async (engine: Engine) => {
15-
await loadFull(engine);
16-
});
15+
const [ init, setInit ] = useState(false);
1716

18-
return (
19-
<main className={styles.main}>
20-
<Particles id="tsparticles" done={done} />
21-
<div className={styles.description}>
22-
<p>
23-
Get started by editing&nbsp;
24-
<code className={styles.code}>app/page.tsx</code>
25-
</p>
26-
<div>
27-
<a
28-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
29-
target="_blank"
30-
rel="noopener noreferrer"
31-
>
32-
By{" "}
33-
<Image
34-
src="/vercel.svg"
35-
alt="Vercel Logo"
36-
className={styles.vercelLogo}
37-
width={100}
38-
height={24}
39-
priority
40-
/>
41-
</a>
42-
</div>
43-
</div>
17+
useEffect(() => {
18+
initParticlesEngine(async (engine: Engine) => {
19+
await loadFull(engine);
20+
}).then(() => {
21+
setInit(true);
22+
});
23+
}, []);
4424

45-
<div className={styles.center}>
46-
<Image
47-
className={styles.logo}
48-
src="/next.svg"
49-
alt="Next.js Logo"
50-
width={180}
51-
height={37}
52-
priority
53-
/>
54-
<div className={styles.thirteen}>
55-
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
56-
</div>
57-
</div>
25+
return (
26+
<main className={styles.main}>
27+
<Particles id="tsparticles" done={init}/>
28+
<div className={styles.description}>
29+
<p>
30+
Get started by editing&nbsp;
31+
<code className={styles.code}>app/page.tsx</code>
32+
</p>
33+
<div>
34+
<a
35+
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
By{" "}
40+
<Image
41+
src="/vercel.svg"
42+
alt="Vercel Logo"
43+
className={styles.vercelLogo}
44+
width={100}
45+
height={24}
46+
priority
47+
/>
48+
</a>
49+
</div>
50+
</div>
5851

59-
<div className={styles.grid}>
60-
<a
61-
href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
62-
className={styles.card}
63-
target="_blank"
64-
rel="noopener noreferrer"
65-
>
66-
<h2 className={inter.className}>
67-
Docs <span>-&gt;</span>
68-
</h2>
69-
<p className={inter.className}>
70-
Find in-depth information about Next.js features and API.
71-
</p>
72-
</a>
52+
<div className={styles.center}>
53+
<Image
54+
className={styles.logo}
55+
src="/next.svg"
56+
alt="Next.js Logo"
57+
width={180}
58+
height={37}
59+
priority
60+
/>
61+
<div className={styles.thirteen}>
62+
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority/>
63+
</div>
64+
</div>
7365

74-
<a
75-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
76-
className={styles.card}
77-
target="_blank"
78-
rel="noopener noreferrer"
79-
>
80-
<h2 className={inter.className}>
81-
Templates <span>-&gt;</span>
82-
</h2>
83-
<p className={inter.className}>Explore the Next.js 13 playground.</p>
84-
</a>
66+
<div className={styles.grid}>
67+
<a
68+
href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69+
className={styles.card}
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
>
73+
<h2 className={inter.className}>
74+
Docs <span>-&gt;</span>
75+
</h2>
76+
<p className={inter.className}>
77+
Find in-depth information about Next.js features and API.
78+
</p>
79+
</a>
8580

86-
<a
87-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
88-
className={styles.card}
89-
target="_blank"
90-
rel="noopener noreferrer"
91-
>
92-
<h2 className={inter.className}>
93-
Deploy <span>-&gt;</span>
94-
</h2>
95-
<p className={inter.className}>
96-
Instantly deploy your Next.js site to a shareable URL with Vercel.
97-
</p>
98-
</a>
99-
</div>
100-
</main>
101-
);
81+
<a
82+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
83+
className={styles.card}
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
>
87+
<h2 className={inter.className}>
88+
Templates <span>-&gt;</span>
89+
</h2>
90+
<p className={inter.className}>Explore the Next.js 13 playground.</p>
91+
</a>
92+
93+
<a
94+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
95+
className={styles.card}
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
>
99+
<h2 className={inter.className}>
100+
Deploy <span>-&gt;</span>
101+
</h2>
102+
<p className={inter.className}>
103+
Instantly deploy your Next.js site to a shareable URL with Vercel.
104+
</p>
105+
</a>
106+
</div>
107+
</main>
108+
);
102109
}

apps/nextjs-beta/app/particles.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import Particles from "@tsparticles/react";
44
import configs from "@tsparticles/configs";
55

66
export default function ParticlesComponent(props: {
7-
id: string;
8-
done: boolean;
7+
id: string;
8+
done: boolean;
99
}) {
10-
console.log(props.done);
11-
12-
return props.done && <Particles id={props.id} options={configs.basic} />;
10+
return props.done && <Particles id={props.id} options={configs.basic}/>;
1311
}

apps/nextjs-beta/package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@
1111
},
1212
"dependencies": {
1313
"@next/font": "^14.0.3",
14-
"@tsparticles/configs": "^3.0.0-beta.4",
15-
"@tsparticles/engine": "^3.0.0-beta.4",
16-
"@tsparticles/react": "^3.0.0-beta.1",
17-
"@types/node": "^20.9.1",
18-
"@types/react": "^18.2.37",
19-
"@types/react-dom": "^18.2.15",
20-
"eslint": "^8.54.0",
14+
"@tsparticles/configs": "^3.0.0",
15+
"@tsparticles/engine": "^3.0.0",
16+
"@tsparticles/react": "workspace:^",
17+
"@types/node": "^20.10.3",
18+
"@types/react": "^18.2.42",
19+
"@types/react-dom": "^18.2.17",
20+
"eslint": "^8.55.0",
2121
"eslint-config-next": "^14.0.3",
2222
"next": "^14.0.3",
2323
"react": "^18.2.0",
2424
"react-dom": "^18.2.0",
2525
"tsparticles": "^3.0.0-beta.4",
26-
"typescript": "^5.2.2"
26+
"typescript": "^5.3.2"
2727
}
2828
}

apps/nextjs/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13-
"@tsparticles/engine": "^3.0.0-beta.4",
14-
"@tsparticles/react": "^3.0.0-beta.1",
15-
"@tsparticles/preset-big-circles": "^3.0.0-beta.4",
13+
"@tsparticles/engine": "^3.0.0",
14+
"@tsparticles/react": "workspace:^",
15+
"@tsparticles/preset-big-circles": "^3.0.0",
1616
"next": "^14.0.3",
1717
"react": "^18.2.0",
1818
"react-dom": "^18.2.0",
19-
"typescript": "^5.2.2"
19+
"typescript": "^5.3.2"
2020
},
2121
"devDependencies": {
22-
"eslint": "^8.54.0",
22+
"eslint": "^8.55.0",
2323
"eslint-config-next": "^14.0.3"
2424
}
2525
}

0 commit comments

Comments
 (0)