react-hook-roulette/dist/index.d.cts

Minimal roulette wheel component. built with React Hooks.

import * as React$1 from 'react';

type RotationDirection = "clockwise" | "counterclockwise";
interface RouletteItem {
    name: string;
    bg?: string;
    color?: string;
    weight?: number;
}
interface CanvasStyle {
    bg: string;
}
interface ArrowStyle {
    bg: string;
    size: number;
}
interface LabelStyle {
    font: string;
    defaultColor: string;
    align: CanvasTextAlign;
    baseline: CanvasTextBaseline;
    offset: number;
}
interface PieTheme {
    bg: string;
    color?: string;
}
interface PieStyle {
    border: boolean;
    borderColor: string;
    borderWidth: number;
    theme: PieTheme[];
}
interface StyleOption {
    canvas?: Partial<CanvasStyle>;
    label?: Partial<LabelStyle>;
    arrow?: Partial<ArrowStyle>;
    pie?: Partial<PieStyle>;
}
interface RouletteCanvas {
    size: number;
    canvasRef: React.RefObject<HTMLCanvasElement>;
}

declare const Roulette: ({ roulette, }: {
    roulette: RouletteCanvas;
}) => React$1.JSX.Element;

interface RouletteOptions {
    size: number;
    initialAngle: number;
    rotationDirection: RotationDirection;
    maxSpeed: number;
    acceleration: number;
    deceleration: number;
    determineAngle: number;
    showArrow: boolean;
    style: StyleOption;
}

declare const useRoulette: ({ items, onSpinUp, onSpinDown, onSpinEnd, options, }: {
    items: RouletteItem[];
    onSpinUp?: (() => void) | undefined;
    onSpinDown?: (() => void) | undefined;
    onSpinEnd?: ((result: string) => void) | undefined;
    options?: Partial<RouletteOptions> | undefined;
}) => {
    roulette: RouletteCanvas;
    result: string;
    onStart: () => void;
    onStop: () => void;
};

export { Roulette, type RouletteItem, useRoulette };