fluid-pointer-react/dist/types/react-types.d.ts

A dependency-free fluid simulation component with WebGL-based physics - supports both vanilla web components and React

import type { CSSProperties } from "react";
import type { ColorMode, InteractionMode, QualityLevel, FluidSplatEventDetail, FluidReadyEventDetail, FluidPerformanceEventDetail } from "./fluid-types.js";
/**
 * Props interface for the React FluidPointer component
 * Maps all web component attributes to React props with proper types
 */
export interface FluidPointerProps {
    width?: string | number;
    height?: string | number;
    aspectRatio?: "16:9" | "1:1" | "4:3" | string;
    minWidth?: string | number;
    minHeight?: string | number;
    maxWidth?: string | number;
    maxHeight?: string | number;
    responsive?: boolean;
    maintainAspectRatio?: boolean;
    simResolution?: number;
    dyeResolution?: number;
    quality?: QualityLevel;
    densityDissipation?: number;
    velocityDissipation?: number;
    pressure?: number;
    pressureIterations?: number;
    curl?: number;
    splatRadius?: number;
    splatForce?: number;
    mouseInteraction?: boolean;
    touchInteraction?: boolean;
    interactionMode?: InteractionMode;
    velocityThreshold?: number;
    shading?: boolean;
    colorful?: boolean;
    colorUpdateSpeed?: number;
    colorTransitionSpeed?: number;
    colorMode?: ColorMode;
    color?: string;
    paused?: boolean;
    autoStart?: boolean;
    className?: string;
    style?: CSSProperties;
    id?: string;
    onFluidReady?: (event: FluidReadyEventDetail) => void;
    onFluidSplat?: (event: FluidSplatEventDetail) => void;
    onFluidInteractionStart?: (event: {
        x: number;
        y: number;
    }) => void;
    onFluidInteractionEnd?: (event: {
        x: number;
        y: number;
    }) => void;
    onFluidFpsChange?: (event: FluidPerformanceEventDetail) => void;
    onFluidPause?: () => void;
    onFluidResume?: () => void;
    ref?: React.Ref<FluidPointerRef>;
}
/**
 * Imperative API exposed through React ref
 * Mirrors the public methods of the web component
 */
export interface FluidPointerRef {
    play(): void;
    pause(): void;
    reset(): void;
    addSplat(x: number, y: number, velocityX: number, velocityY: number, color?: [number, number, number]): void;
    addRandomSplats(count: number): void;
    getCanvas(): HTMLCanvasElement | null;
    getSimulation(): any;
}
/**
 * Default props for the React component
 */
export declare const defaultFluidPointerProps: Partial<FluidPointerProps>;
/**
 * CSS styles for the React component container
 * Converted from the web component's shadow DOM styles
 */
export declare const fluidPointerStyles: {
    readonly container: {
        readonly display: "block";
        readonly position: "relative";
        readonly overflow: "hidden";
        readonly boxSizing: "border-box";
        readonly cursor: "crosshair";
        readonly width: string | undefined;
        readonly height: string | undefined;
        readonly minWidth: string | undefined;
        readonly minHeight: string | undefined;
        readonly maxWidth: string | undefined;
        readonly maxHeight: string | undefined;
        readonly aspectRatio: string | undefined;
    };
    readonly canvas: {
        readonly width: "100%";
        readonly height: "100%";
        readonly display: "block";
        readonly objectFit: "cover";
    };
    readonly responsive: {
        readonly width: "100%";
        readonly height: "auto";
    };
    readonly paused: {
        readonly cursor: "default";
    };
};
//# sourceMappingURL=react-types.d.ts.map