svelte-particles
Official tsParticles SvelteJS component
Installation
npm install svelte-particlesor
yarn add svelte-particlesUsage
<script>
import Particles from "svelte-particles";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
let particlesUrl = "http://foo.bar/particles.json"; // placeholder, replace it with a real url
let particlesConfig = {
particles: {
color: {
value: "#000",
},
links: {
enable: true,
color: "#000",
},
move: {
enable: true,
},
number: {
value: 100,
},
},
};
let onParticlesLoaded = event => {
const particlesContainer = event.detail.particles;
// you can use particlesContainer to call all the Container class
// (from the core library) methods like play, pause, refresh, start, stop
};
let particlesInit = async engine => {
// you can use main to customize the tsParticles instance adding presets or custom shapes
// 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);
await loadSlim(engine);
};
</script>
<Particles
id="tsparticles"
class="foo bar"
style=""
options="{particlesConfig}"
on:particlesLoaded="{onParticlesLoaded}"
particlesInit="{particlesInit}"
/>
<!-- or -->
<Particles
id="tsparticles"
class="foo bar"
style=""
url="{particlesUrl}"
on:particlesLoaded="{onParticlesLoaded}"
particlesInit="{particlesInit}"
/>SSR
The particles component isn't built for SSR, so you have to force the component to be called client side
with async import.
You can see a sample below:
<script>
import { onMount } from "svelte";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
let ParticlesComponent;
onMount(async () => {
const module = await import("svelte-particles");
ParticlesComponent = module.default;
});
let particlesUrl = "http://foo.bar/particles.json"; // placeholder, replace it with a real url
let particlesConfig = {
particles: {
color: {
value: "#000",
},
links: {
enable: true,
color: "#000",
},
move: {
enable: true,
},
number: {
value: 100,
},
},
};
let onParticlesLoaded = event => {
const particlesContainer = event.detail.particles;
// you can use particlesContainer to call all the Container class
// (from the core library) methods like play, pause, refresh, start, stop
};
let particlesInit = async engine => {
// you can use main to customize the tsParticles instance adding presets or custom shapes
// 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(main);
await loadSlim(engine);
};
</script>
<svelte:component
this="{ParticlesComponent}"
id="tsparticles"
class="foo bar"
style=""
options="{particlesConfig}"
on:particlesLoaded="{onParticlesLoaded}"
particlesInit="{particlesInit}"
/>
<!-- or -->
<svelte:component
this="{ParticlesComponent}"
id="tsparticles"
class="foo bar"
style=""
url="{particlesUrl}"
on:particlesLoaded="{onParticlesLoaded}"
particlesInit="{particlesInit}"
/>TypeScript errors
A user reported me a TypeScript error (#3963), and that's because this Svelte component is built using TypeScript.
If someone is experiencing the same error, please follow these steps:
- install these packages:
typescript,svelte-preprocess. - add a
tsconfig.jsonfile to your project, following this sample: https://github.com/ivanhofer/sveltekit-typescript-showcase#configure-typescript (see this for example: https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/main/tsconfig.json) - import
svelte-preprocessin your svelte configuration file, like this:import preprocess from 'svelte-preprocess'(see this for example: https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L2) - use the
preprocessfunction in your svelte configuration file, like this:preprocess: preprocess(),(see this for example: https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L9)
After that, everything should work as expected.
SvelteKit
If you have issues with SvelteKit, like you Cannot use import statement outside a module, change your vite.config.ts file like this:
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [sveltekit()],
ssr: {
noExternal: ["tsparticles", "tsparticles-slim", "tsparticles-engine", "svelte-particles"], // add all tsparticles libraries here, they're not made for SSR, they're client only
},
});Demos
The demo website is here
There's also a CodePen collection actively maintained and updated here