Wrappers

Cette page est le hub des wrappers. Utilisez-la pour choisir le bon package, puis ouvrez la page dediee pour les details d'installation et d'utilisation.

Dossier source : https://github.com/tsparticles/tsparticles/tree/main/wrappers

Pages wrappers

Les plus utilises

Ecosysteme React

Ecosysteme Vue

Autres (ordre alphabetique)

Flux d'integration commun

Quel que soit le framework :

installer le wrapper + @tsparticles/engine
charger les fonctionnalités une fois (@tsparticles/slim, @tsparticles/all, ou des plugins personnalises)
afficher le composant wrapper avec vos options

Wrappers officiels (ordre alphabetique)

Regle d'ordre pour cette section :

ordre alphabetique par nom de package
les exceptions sont indiquees explicitement dans les notes de mapping (par exemple WordPress exige une installation complete)
@tsparticles/angular : wrapper composant Angular (<ngx-particles />)
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/angular#readme - guide local : /guide/wrappers-angular
@tsparticles/astro : wrapper composant Astro
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/astro#readme - guide local : /guide/wrappers-astro
@tsparticles/ember : wrapper Ember
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/ember#readme - guide local : /guide/wrappers-ember
@tsparticles/inferno : wrapper composant Inferno
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/inferno#readme - guide local : /guide/wrappers-inferno
@tsparticles/jquery : wrapper plugin jQuery
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/jquery#readme - guide local : /guide/wrappers-jquery
@tsparticles/lit : package composant Lit
Source : https://github.com/tsparticles/tsparticles/tree/main/wrappers/lit - guide local : /guide/wrappers-lit
@tsparticles/nextjs : wrapper Next.js autour de @tsparticles/react
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/nextjs#readme - guide local : /guide/wrappers-nextjs
@tsparticles/nuxt2 : module Nuxt 2 (enregistrement client-side)
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/nuxt2#readme - guide local : /guide/wrappers-nuxt2
@tsparticles/nuxt3 : module Nuxt 3 (enregistrement client-side)
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/nuxt3#readme - guide local : /guide/wrappers-nuxt3
@tsparticles/nuxt4 : module Nuxt 4 (enregistrement client-side)
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/nuxt4#readme - guide local : /guide/wrappers-nuxt4
@tsparticles/preact : wrapper composant Preact
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact#readme - guide local : /guide/wrappers-preact
@tsparticles/qwik : wrapper composant Qwik
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/qwik#readme - guide local : /guide/wrappers-qwik
@tsparticles/react : wrapper composant React
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/react#readme - guide local : /guide/wrappers-react
@tsparticles/riot : wrapper Riot
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/riot#readme - guide local : /guide/wrappers-riot
@tsparticles/solid : wrapper composant Solid
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/solid#readme - guide local : /guide/wrappers-solid
@tsparticles/svelte : wrapper composant Svelte
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/svelte#readme - guide local : /guide/wrappers-svelte
@tsparticles/vue2 : wrapper composant Vue 2
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/vue2#readme - guide local : /guide/wrappers-vue2
@tsparticles/vue3 : wrapper composant Vue 3
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/vue3#readme - guide local : /guide/wrappers-vue3
@tsparticles/webcomponents : wrapper Web Components (<web-particles />)
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/webcomponents#readme - guide local : /guide/wrappers-webcomponents
@tsparticles/wordpress : package plugin WordPress officiel
Source : https://github.com/tsparticles/tsparticles/tree/main/wrappers/wordpress - guide local : /guide/wrappers-wordpress
angular-confetti : wrapper Angular pour @tsparticles/confetti
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/angular-confetti#readme - guide local : /guide/wrappers-angular-confetti
angular-fireworks : wrapper Angular pour @tsparticles/fireworks
Docs : https://github.com/tsparticles/tsparticles/tree/main/wrappers/angular-fireworks#readme - guide local : /guide/wrappers-angular-fireworks

Notes WordPress et Elementor

@tsparticles/wordpress est le package plugin officiel et exige un environnement WordPress complet.
Elementor n'a pas de package plugin tsParticles officiel et autonome.
Le README reference une integration via Premium Addons for Elementor : https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/

Mapping wrappers vers demos

Utilisez cette matrice rapide pour passer d'un package wrapper a une demo monorepo executable.

Regle d'ordre pour ce tableau :

ordre alphabetique par nom de package wrapper
exception explicite pour les wrappers non applicables aux demos (@tsparticles/wordpress)

Dossier source des demos : https://github.com/tsparticles/tsparticles/tree/main/demo

Package wrapper	Projet demo
`@tsparticles/angular`	`demo/angular`
`@tsparticles/astro`	`demo/astro`
`@tsparticles/ember`	`demo/ember`
`@tsparticles/inferno`	`demo/inferno`
`@tsparticles/jquery`	`demo/jquery`
`@tsparticles/lit`	`demo/lit`
`@tsparticles/nextjs`	`demo/nextjs`, `demo/nextjs-legacy`
`@tsparticles/nuxt2`	`demo/nuxt2`
`@tsparticles/nuxt3`	`demo/nuxt3`
`@tsparticles/nuxt4`	`demo/nuxt4`
`@tsparticles/preact`	`demo/preact`
`@tsparticles/qwik`	`demo/qwik`
`@tsparticles/react`	`demo/react`
`@tsparticles/riot`	`demo/riot`
`@tsparticles/solid`	`demo/solid`
`@tsparticles/svelte`	`demo/svelte`, `demo/svelte-kit`
`@tsparticles/vue2`	`demo/vue2`
`@tsparticles/vue3`	`demo/vue3`
`@tsparticles/webcomponents`	`demo/webcomponents`
`@tsparticles/wordpress`	non applicable (installation WordPress complete)
`angular-confetti`	`demo/angular`
`angular-fireworks`	`demo/angular`

Patterns minimaux

Provider style React / Next.js

tsx

import Particles, { ParticlesProvider } from "@tsparticles/react";
import type { Engine } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";

const init = async (engine: Engine): Promise<void> => {
  await loadSlim(engine);
};

export function Background() {
  return (
    <ParticlesProvider init={init}>
      <Particles id="tsparticles" options={{ particles: { move: { enable: true } } }} />
    </ParticlesProvider>
  );
}

Fonction d'enregistrement style Vue / Nuxt

import type { Engine } from "@tsparticles/engine";

export async function registerParticles(engine: Engine): Promise<void> {
  const [{ loadSlim }] = await Promise.all([import("@tsparticles/slim")]);

  await loadSlim(engine);
}

Initialisation unique Angular

import { NgParticlesService } from "@tsparticles/angular";
import { loadSlim } from "@tsparticles/slim";

constructor(private readonly particlesService: NgParticlesService) {}

ngOnInit(): void {
  void this.particlesService.init(async engine => {
    await loadSlim(engine);
  });
}

Wrappers ​

Pages wrappers ​

Les plus utilises ​

Ecosysteme React ​

Ecosysteme Vue ​

Autres (ordre alphabetique) ​

Flux d'integration commun ​

Wrappers officiels (ordre alphabetique) ​

Notes WordPress et Elementor ​

Mapping wrappers vers demos ​

Patterns minimaux ​

Provider style React / Next.js ​

Fonction d'enregistrement style Vue / Nuxt ​

Initialisation unique Angular ​

Pages liees ​