tsParticles

हिन्दी

English
Italiano
Français
Español
Deutsch
Português
Русский
中文
日本語

हिन्दी

English
Italiano
Français
Español
Deutsch
Português
Русский
中文
日本語

Appearance

Wrappers ​

यह पेज wrappers का hub है। सही package चुनें और फिर installation/usage details के लिए dedicated पेज खोलें।

Source folder: https://github.com/tsparticles/tsparticles/tree/main/wrappers

Wrapper pages ​

सबसे लोकप्रिय पहले ​

React ecosystem ​

Vue ecosystem ​

अन्य (alphabetical) ​

Common integration flow ​

Framework कोई भी हो:

  1. wrapper + @tsparticles/engine install करें
  2. features एक बार load करें (@tsparticles/slim, @tsparticles/all, या custom plugins)
  3. options के साथ wrapper component render करें

Official wrappers (alphabetical) ​

इस section की ordering rule:

WordPress और Elementor नोट्स ​

  • @tsparticles/wordpress official plugin package है और इसके लिए full WordPress setup चाहिए।
  • Elementor के लिए कोई official standalone tsParticles plugin package नहीं है।
  • README में Premium Addons for Elementor के माध्यम से integration का संदर्भ है: https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/

Wrapper से demo mapping ​

इस matrix से wrapper package से runnable monorepo demo पर जल्दी जा सकते हैं।

Table ordering rule:

  • wrapper package name के हिसाब से alphabetical order
  • demo पर लागू न होने वाले wrappers के लिए explicit exception (@tsparticles/wordpress)

Source demos folder: https://github.com/tsparticles/tsparticles/tree/main/demo

Wrapper packageDemo project
@tsparticles/angulardemo/angular
@tsparticles/astrodemo/astro
@tsparticles/emberdemo/ember
@tsparticles/infernodemo/inferno
@tsparticles/jquerydemo/jquery
@tsparticles/litdemo/lit
@tsparticles/nextjsdemo/nextjs, demo/nextjs-legacy
@tsparticles/nuxt2demo/nuxt2
@tsparticles/nuxt3demo/nuxt3
@tsparticles/nuxt4demo/nuxt4
@tsparticles/preactdemo/preact
@tsparticles/qwikdemo/qwik
@tsparticles/reactdemo/react
@tsparticles/riotdemo/riot
@tsparticles/soliddemo/solid
@tsparticles/sveltedemo/svelte, demo/svelte-kit
@tsparticles/vue2demo/vue2
@tsparticles/vue3demo/vue3
@tsparticles/webcomponentsdemo/webcomponents
@tsparticles/wordpressलागू नहीं (पूर्ण WordPress installation आवश्यक)
angular-confettidemo/angular
angular-fireworksdemo/angular

Minimal patterns ​

React / Next.js-style provider ​

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>
  );
}

Vue / Nuxt-style register function ​

ts
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);
}

Angular one-time initialization ​

ts
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);
  });
}