Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tsparticles/svelte
Svelte tsParticles official plugin
https://github.com/tsparticles/svelte
hacktoberfest javascript svelte tsparticles typescript
Last synced: 28 days ago
JSON representation
Svelte tsParticles official plugin
- Host: GitHub
- URL: https://github.com/tsparticles/svelte
- Owner: tsparticles
- License: mit
- Created: 2022-11-11T00:52:34.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-12T22:21:50.000Z (6 months ago)
- Last Synced: 2024-05-21T11:53:34.736Z (6 months ago)
- Topics: hacktoberfest, javascript, svelte, tsparticles, typescript
- Language: Svelte
- Homepage:
- Size: 1.22 MB
- Stars: 40
- Watchers: 4
- Forks: 4
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://particles.js.org)
# @tsparticles/svelte
[](https://www.npmjs.com/package/@tsparticles/svelte) [](https://www.npmjs.com/package/@tsparticles/svelte) [](https://github.com/sponsors/matteobruni)
Official [tsParticles](https://github.com/matteobruni/tsparticles) SvelteJS component
[](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 
## Installation
```shell
npm install @tsparticles/svelte
```
or
```shell
yarn add @tsparticles/svelte
```
## Usage
```html
import Particles, { particlesInit } from '@tsparticles/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 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
};
void particlesInit(async (engine) => {
// call this once per app
// 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);
});
```
### 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:
```html
import { particlesInit } from '@tsparticles/svelte';
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('@tsparticles/svelte');
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
};
void particlesInit(async (engine) => {
// call this once per app
// 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);
});
```
### 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.json` file to your project, following this sample: (see this for example: )
- import `svelte-preprocess` in your svelte configuration file, like this: `import preprocess from 'svelte-preprocess'` (see this for example: )
- use the `preprocess` function in your svelte configuration file, like this: `preprocess: preprocess(),` (see this for example: )
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:
```ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
ssr: {
noExternal: ['tsparticles', '@tsparticles/slim', '@tsparticles/engine', '@tsparticles/svelte'] // add all tsparticles libraries here, they're not made for SSR, they're client only
}
});
```
## Demos
The demo website is [here](https://particles.js.org)
There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)