क्विक इंटीग्रेशन

@tsparticles/qwik पैकेज क्विक के रिज्यूमेबिलिटी मॉडल के लिए अनुकूलित एक <Particles> कम्पोनेंट प्रदान करता है। यह आलसी आरंभीकरण के लिए useVisibleTask$ और प्रतिक्रियाशील अपडेट के लिए सिग्नल का उपयोग करता है।

इंस्टॉलेशन

bash

npm install @tsparticles/qwik tsparticles

टाइपस्क्रिप्ट घोषणाएँ शामिल हैं — किसी अतिरिक्त टाइप पैकेज की आवश्यकता नहीं है।

इंजन आरंभीकरण

क्विक में, इंजन को useVisibleTask$ ब्लॉक के अंदर आरंभ किया जाना चाहिए ताकि यह सुनिश्चित हो सके कि यह केवल क्लाइंट पर चलता है (SSR के दौरान कभी नहीं)। तत्परता को ट्रैक करने के लिए एक सिग्नल का उपयोग करें:

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
  });

  return <>{engineReady.value && <Particles id="tsparticles" options={{}} />}</>;
});

मूल उपयोग

एक बार इंजन तैयार हो जाने पर, अपने कॉन्फ़िगरेशन के साथ <Particles> कम्पोनेंट रेंडर करें:

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
  });

  const options = {
    background: {
      color: "#0d1117",
    },
    particles: {
      color: { value: "#58a6ff" },
      links: {
        enable: true,
        color: "#58a6ff",
        distance: 150,
      },
      move: {
        enable: true,
        speed: 2,
      },
      number: {
        value: 80,
      },
    },
  };

  return <>{engineReady.value && <Particles id="tsparticles" options={options} />}</>;
});

सशर्त रेंडरिंग

engineReady सिग्नल पैटर्न सुनिश्चित करता है कि <Particles> कम्पोनेंट केवल इंजन पूरी तरह से आरंभ होने के बाद ही माउंट हो। यह सर्वर और क्लाइंट के बीच हाइड्रेशन बेमेल को रोकता है:

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);
  const loading = useSignal(true);

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
    loading.value = false;
  });

  return (
    <div style={{ position: "relative", width: "100%", height: "100vh" }}>
      {loading.value && (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            height: "100%",
            color: "#888",
          }}
        >
          पार्टिकल्स लोड हो रहे हैं...
        </div>
      )}
      {engineReady.value && (
        <Particles
          id="tsparticles"
          options={{
            background: { color: "#0d1117" },
            fullScreen: { enable: true, zIndex: -1 },
            particles: {
              color: { value: "#58a6ff" },
              links: { enable: true, color: "#58a6ff", distance: 150 },
              move: { enable: true, speed: 2 },
              number: { value: 80 },
            },
          }}
        />
      )}
    </div>
  );
});

इंटरैक्टिव पार्टिकल्स

अपने विकल्पों में interactivity अनुभाग जोड़कर होवर और क्लिक इंटरैक्शन सक्षम करें:

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
  });

  const options = {
    background: { color: "#0d1117" },
    fullScreen: { enable: true },
    particles: {
      color: { value: "#58a6ff" },
      links: { enable: true, color: "#58a6ff", distance: 150 },
      move: { enable: true, speed: 1.5 },
      number: { value: 100 },
      size: { value: { min: 1, max: 4 } },
      opacity: { value: 0.6 },
    },
    interactivity: {
      events: {
        onHover: { enable: true, mode: "grab" },
        onClick: { enable: true, mode: "push" },
        resize: { enable: true },
      },
      modes: {
        grab: { distance: 180, links: { opacity: 0.5 } },
        push: { quantity: 4 },
      },
    },
  };

  return <>{engineReady.value && <Particles id="tsparticles" options={options} />}</>;
});

कस्टम कॉन्फ़िगरेशन

एनिमेशन, एकाधिक रंग और समृद्ध इंटरैक्टिविटी के साथ एक पूर्ण कॉन्फ़िगरेशन:

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine, ISourceOptions } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
  });

  const options: ISourceOptions = {
    background: { color: "#0d1117" },
    fpsLimit: 60,
    fullScreen: { enable: true, zIndex: -1 },
    particles: {
      color: {
        value: ["#ff5733", "#33ff57", "#3357ff", "#f3f333"],
      },
      links: {
        color: "random",
        enable: true,
        opacity: 0.3,
        distance: 120,
        width: 1,
      },
      move: {
        enable: true,
        speed: 2,
        direction: "none",
        random: true,
        straight: false,
        outModes: "bounce",
        attract: {
          enable: false,
          rotateX: 600,
          rotateY: 1200,
        },
      },
      number: {
        value: 120,
        density: { enable: true },
      },
      opacity: {
        value: 0.8,
        animation: {
          enable: true,
          speed: 0.5,
          minimumValue: 0.1,
          sync: false,
        },
      },
      size: {
        value: { min: 1, max: 6 },
        animation: {
          enable: true,
          speed: 3,
          minimumValue: 1,
          sync: false,
        },
      },
      twinkle: {
        particles: {
          enable: true,
          frequency: 0.05,
          opacity: 0.5,
        },
      },
    },
    interactivity: {
      events: {
        onHover: { enable: true, mode: "repulse" },
        onClick: { enable: true, mode: "push" },
        resize: { enable: true },
      },
      modes: {
        repulse: { distance: 120, duration: 0.4 },
        push: { quantity: 4 },
      },
    },
    detectRetina: true,
  };

  return <>{engineReady.value && <Particles id="tsparticles" options={options} />}</>;
});

टाइपस्क्रिप्ट

@tsparticles/qwik पैकेज पूर्ण प्रकार निर्यात करता है। टाइप-सुरक्षित कॉन्फ़िगरेशन के लिए ISourceOptions और आरंभीकरण कॉलबैक के लिए Engine का उपयोग करें:

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine, ISourceOptions } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
  });

  const options: ISourceOptions = {
    background: { color: "#000" },
    particles: {
      number: { value: 50 },
      color: { value: "#fff" },
    },
  };

  return <>{engineReady.value && <Particles id="tsparticles" options={options} />}</>;
});

Reactive Behavior

The <Particles> component reacts to prop changes at runtime:

id, options, or url change → the existing container is destroyed and particles are reloaded with the new values.
theme change → loadTheme is called on the existing container. This requires the optional @tsparticles/plugin-themes package to be loaded (otherwise it is a safe no-op).

On component unmount, the particles container is automatically destroyed — no orphan animations remain.

आलसी लोडिंग

क्विक का रिज्यूमेबिलिटी मॉडल का अर्थ है कि पार्टिकल्स कोड केवल तब लोड और निष्पादित होता है जब कम्पोनेंट व्यूपोर्ट में दिखाई देता है। useVisibleTask$ हुक इंजन आरंभीकरण को ट्रिगर करता है, और <Particles> कम्पोनेंट स्वयं क्विक द्वारा आयात होने पर स्वचालित रूप से कोड-स्प्लिट हो जाता है:

tsx

import { component$, useSignal, useVisibleTask$, $ } from "@builder.io/qwik";
import type { Engine } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
  });

  return (
    <div>
      {engineReady.value && (
        <Particles
          id="tsparticles"
          options={{
            background: { color: "#0d1117" },
          }}
        />
      )}
    </div>
  );
});

कॉलबैक वायर करते समय क्विक-अनुकूलित इवेंट हैंडलर के लिए $ प्रत्यय सम्मेलन का उपयोग करें:

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine, Container } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export default component$(() => {
  const engineReady = useSignal(false);
  const containerRef = useSignal<Container | undefined>();

  useVisibleTask$(async () => {
    await initParticlesEngine(async (engine: Engine) => {
      await loadFull(engine);
    });
    engineReady.value = true;
  });

  const handleParticlesLoaded = $((container?: Container) => {
    containerRef.value = container;
    console.log("पार्टिकल्स लोड हुए:", container?.id);
  });

  return (
    <>
      {engineReady.value && (
        <Particles
          id="tsparticles"
          options={{ background: { color: "#0d1117" } }}
          particlesLoaded={handleParticlesLoaded}
        />
      )}
    </>
  );
});

यह दृष्टिकोण सुनिश्चित करता है कि आपके पार्टिकल एनिमेशन पूरी तरह से ट्री-शेकेबल हैं और जरूरत पड़ने पर ही क्लाइंट को भेजे जाते हैं।

क्विक इंटीग्रेशन ​

इंस्टॉलेशन ​

इंजन आरंभीकरण ​

मूल उपयोग ​

सशर्त रेंडरिंग ​

इंटरैक्टिव पार्टिकल्स ​

कस्टम कॉन्फ़िगरेशन ​

टाइपस्क्रिप्ट ​

Reactive Behavior ​

आलसी लोडिंग ​