Official tsParticles solid component
npm install @tsparticles/solid
or
yarn add @tsparticles/solid
Examples:
Remote url
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 ( <div class="App"> {init() && <Particles id="tsparticles" init={particlesInit} url="https://foo.bar/particles.json" />} </div> ); }
Options object
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 ( <div class="App"> {init() && <Particles id="tsparticles" init={particlesInit} options={{ background: { color: "#000", }, fullScreen: { enable: true, }, }} />} </div> ); }
| 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.
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