tsParticles

日本語

English
Italiano
Français
Español
Deutsch
Português
Русский
中文
हिन्दी

日本語

English
Italiano
Français
Español
Deutsch
Português
Русский
中文
हिन्दी

Appearance

Wrappers ​

このページは wrappers のハブです。ここで適切な package を選び、個別ページで installation と usage の詳細を確認できます。

ソースフォルダー: https://github.com/tsparticles/tsparticles/tree/main/wrappers

wrappers ページ ​

まずは主要なもの ​

React エコシステム ​

Vue エコシステム ​

その他（アルファベット順） ​

共通の統合フロー ​

どの framework でも手順は同じです。

  1. wrapper + @tsparticles/engine をインストール
  2. 機能を一度だけロード（@tsparticles/slim、@tsparticles/all、またはカスタム plugins）
  3. options を渡して wrapper コンポーネントを描画

公式 wrappers（アルファベット順） ​

このセクションの並び順ルール:

WordPress / Elementor に関するメモ ​

wrapper から demo へのマッピング ​

この表を使うと、wrapper package から実行可能な monorepo demo へすぐに移動できます。

この表の並び順ルール:

  • wrapper package 名のアルファベット順
  • demo 非対応 wrapper の明示的な例外（@tsparticles/wordpress）

demo ソースフォルダー: 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 環境が必要）
angular-confettidemo/angular
angular-fireworksdemo/angular

最小パターン ​

React / Next.js スタイルの 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 スタイルの登録関数 ​

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 の一度だけの初期化 ​

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

関連ページ ​