@tsparticles/solid

  

Official tsParticles solid component

  

![tsParticles Product Hunt](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles")

Installation

``shell
npm install @tsparticles/solid
`

or

`shell
yarn add @tsparticles/solid
`

How to use

$3

Examples:

_Remote url_

`javascript
import Particles 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);
});
});

return (



);
}
`

_Options object_

`javascript
import Particles 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);
});
});

return (



);
}
``

$3

| 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 |
| 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.

Demos

You can see the official sample created using CodeSandbox here

The demo website is here

There's also a CodePen collection actively maintained and updated here