React

Size the canvas, update props, and access the core instance through a ref.

Live previewDrag the cloth

Wind 7.0

Turbulence 0.34

Grid X 32

Drag radius 1

Banner.tsx

import { FlagCloth, type FlagClothInstance } from 'flag-cloth/react';
import { useRef } from 'react';

export function Banner() {
  const flagRef = useRef<FlagClothInstance | null>(null);

  return (
    <FlagCloth
      ref={flagRef}
      texture="/my-flag.webp"
      canvasWidth="100%"
      canvasHeight={520}
      width={3}
      height={2}
      segments={{ x: 32, y: 20 }}
      attachment="left"
      wind={{
        strength: 7.0,
        turbulence: 0.34,
      }}
      interaction={{
        enabled: true,
        dragRadius: 1,
      }}
    />
  );
}