diff --git a/README.md b/README.md
index a232227..9382316 100644
--- a/README.md
+++ b/README.md
@@ -30,92 +30,55 @@ Examples:
_Remote url_
-```javascript
-import Particles from "@tsparticles/solid";
-
-function App() {
- const [ init, setInit ] = createSignal(false);
-
- createEffect(() => {
- if (init()) {
- return;
- }
+```tsx
+import { Show } from "solid-js";
+import { loadFull } from "tsparticles";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
- initParticlesEngine(async (engine) => {
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- await loadFull(engine);
- }).then(() => {
- setInit(true);
- })
- });
+const App = () => {
+ const [init] = createResource(() => initParticlesEngine(loadFull));
return (
-
+
+
+
);
-}
+};
```
_Options object_
```javascript
-import Particles from "@tsparticles/solid";
+import configs from "@tsparticles/configs";
+import { Show } from "solid-js";
+import { loadFull } from "tsparticles";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
-function App() {
- const [ init, setInit ] = createSignal(false);
-
- createEffect(() => {
- if (init()) {
- return;
- }
-
- initParticlesEngine(async (engine) => {
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- await loadFull(engine);
- }).then(() => {
- setInit(true);
- })
- });
+const App = () => {
+ const init = initParticlesEngine(loadFull);
return (
-
+
+
+
);
-}
+};
+
+export default App;
```
### Props
| Prop | Type | Definition |
-|-----------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| id | string | The id of the element. |
| width | string | The width of the canvas. |
| height | string | The height of the canvas. |
| options | object | The options of the particles instance. |
| url | string | The remote options url, called using an AJAX request |
| style | object | The style of the canvas element. |
-| className | string | The class name of the canvas wrapper. |
-| canvasClassName | string | the class name of the canvas. |
-| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) |
+| class | string | The class name of the canvas wrapper. |
+| canvasClass | string | the class name of the canvas. |
| particlesloaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
Find your parameters configuration [here](https://particles.js.org).
diff --git a/apps/solid/src/App.tsx b/apps/solid/src/App.tsx
index 01f1677..f15eccf 100644
--- a/apps/solid/src/App.tsx
+++ b/apps/solid/src/App.tsx
@@ -1,8 +1,8 @@
import configs from "@tsparticles/configs";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
import type { Component } from 'solid-js';
import { createSignal, Show } from "solid-js";
import { loadFull } from "tsparticles";
-import Particles, { initParticlesEngine } from "@tsparticles/solid";
const App: Component = () => {
const init = initParticlesEngine(loadFull)
diff --git a/components/solid/README.md b/components/solid/README.md
index 70b714c..9382316 100644
--- a/components/solid/README.md
+++ b/components/solid/README.md
@@ -30,75 +30,41 @@ Examples:
_Remote url_
-```javascript
-import Particles from "@tsparticles/solid";
-
-function App() {
- const [init, setInit] = createSignal(false);
-
- createEffect(() => {
- if (init()) {
- return;
- }
+```tsx
+import { Show } from "solid-js";
+import { loadFull } from "tsparticles";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
- initParticlesEngine(async engine => {
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- await loadFull(engine);
- }).then(() => {
- setInit(true);
- });
- });
+const App = () => {
+ const [init] = createResource(() => initParticlesEngine(loadFull));
return (
-
+
+
+
);
-}
+};
```
_Options object_
```javascript
-import Particles from "@tsparticles/solid";
+import configs from "@tsparticles/configs";
+import { Show } from "solid-js";
+import { loadFull } from "tsparticles";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
-function App() {
- const [init, setInit] = createSignal(false);
-
- createEffect(() => {
- if (init()) {
- return;
- }
-
- initParticlesEngine(async engine => {
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- await loadFull(engine);
- }).then(() => {
- setInit(true);
- });
- });
+const App = () => {
+ const init = initParticlesEngine(loadFull);
return (
-
+
+
+
);
-}
+};
+
+export default App;
```
### Props
@@ -111,9 +77,8 @@ function App() {
| options | object | The options of the particles instance. |
| url | string | The remote options url, called using an AJAX request |
| style | object | The style of the canvas element. |
-| className | string | The class name of the canvas wrapper. |
-| canvasClassName | string | the class name of the canvas. |
-| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) |
+| class | string | The class name of the canvas wrapper. |
+| canvasClass | string | the class name of the canvas. |
| particlesloaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
Find your parameters configuration [here](https://particles.js.org).
diff --git a/components/solid/package.json b/components/solid/package.json
index 7c9161b..7e625e0 100644
--- a/components/solid/package.json
+++ b/components/solid/package.json
@@ -117,7 +117,7 @@
"test:ssr": "pnpm run test:client --mode ssr",
"lint": "concurrently \"pnpm:lint:code --fix\" pnpm:lint:types",
"lint:ci": "concurrently pnpm:lint:code pnpm:lint:types",
- "lint:code": "eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{js,ts,tsx,jsx}",
+ "lint:code": "eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{ts,tsx}",
"lint:types": "tsc --noEmit",
"update-deps": "pnpm up -Li",
"prettify": "prettier --write \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"README.md\"",
diff --git a/components/solid/src/IParticlesProps.ts b/components/solid/src/IParticlesProps.ts
index f7ffc79..e1a6c51 100644
--- a/components/solid/src/IParticlesProps.ts
+++ b/components/solid/src/IParticlesProps.ts
@@ -7,11 +7,9 @@ export interface IParticlesProps {
height?: string;
options?: ISourceOptions;
url?: string;
- params?: ISourceOptions;
style?: JSX.CSSProperties;
class?: string;
canvasClass?: string;
- container?: { current: Container };
// prettier-ignore
particlesLoaded?: (container: Container) => Promise;
}
diff --git a/components/solid/src/Particles.tsx b/components/solid/src/Particles.tsx
index 8ed9302..adee423 100644
--- a/components/solid/src/Particles.tsx
+++ b/components/solid/src/Particles.tsx
@@ -6,13 +6,13 @@ import type { IParticlesProps } from "./IParticlesProps";
* @param (props:IParticlesProps) Particles component properties
*/
const Particles = (props: IParticlesProps): JSX.Element => {
- const config = mergeProps({ id: "tsparticles" }, props);
+ const config = mergeProps({ id: "tsparticles", options: {} }, props);
onMount(() => {
const [container] = createResource(
() => ({
id: config.id,
- options: config.params ?? config.options ?? {},
+ options: config.options,
url: config.url,
}),
data => tsParticles.load(data),