Official tsParticles Riot component.
npm install @tsparticles/riotor
yarn add @tsparticles/riotInitialize the engine once before mounting the component.
<script>
import { initParticlesEngine } from "@tsparticles/riot";
import { loadSlim } from "@tsparticles/slim";
void initParticlesEngine(async (engine) => {
await loadSlim(engine);
});
export default {
/* ... */
};
</script>
<riot-particles
id="tsparticles"
options={{
background: {
color: {
value: "#000",
},
},
particles: {
links: {
enable: true,
},
move: {
enable: true,
},
},
}}
particlesLoaded={(container) => console.log(container)}
/>
<!-- or -->
<riot-particles
id="tsparticles"
url="https://foo.bar/particles.json"
particlesLoaded={(container) => console.log(container)}
/>| Prop | Type | Description |
|---|---|---|
id |
string |
The container id. |
options |
object |
The particles options object. |
url |
string |
A remote URL to a JSON configuration file. |
theme |
string |
The theme name to apply. Requires @tsparticles/plugin-themes. Without the plugin, setting this prop is a safe no-op. |
particlesLoaded |
function |
Callback invoked when particles are loaded, receives (container?: Container). |
- Changing
iddestroys the current container and creates a new one with the new id. - Changing
optionsorurldestroys the current container and reloads particles with the new configuration. - Changing
themeapplies the theme vialoadThemewithout a full reload (safe no-op if@tsparticles/plugin-themesis not loaded).
Note: Theme support requires the optional
@tsparticles/plugin-themespackage. Without it,themechanges are silently ignored and do not error.
The component automatically destroys the particles container when it is removed from the DOM. No orphan animations remain.