react-spinning-border/dist/index.d.ts

Dynamic, spinning image border animation for react.

import { default as default_2 } from 'react';

declare type ColorArray = [HexColor] | [HexColor, HexColor] | [HexColor, HexColor, HexColor] | [HexColor, HexColor, HexColor, HexColor];

declare type HexColor = `#${string}`;

export declare const SpinningBorder: default_2.ForwardRefExoticComponent<SpinningBorderProps & default_2.RefAttributes<HTMLDivElement>>;

export declare interface SpinningBorderProps extends default_2.HTMLAttributes<HTMLDivElement> {
    /**
     * The local or external image source.
     *
     * - Must be a valid image URL or path.
     * - Typically a profile or avatar image.
     */
    image: string;
    /**
     * An optional array of hex color strings to customize border gradients.
     *
     * - Must be valid hex color strings (e.g., `#ffffff`).
     * - Can contain 1 to 4 colors.
     *
     * @example
     * // Valid
     * colors: ['#ff0000', '#00ff00', '#0000ff']
     *
     * // Invalid
     * colors: ['#zzzzzz'] (not a valid hex color)
     * colors: [] (empty array not allowed)
     *
     * @default ['#f137a6', '#fbe932', '#5c9eff', '#7ed21e']
     */
    colors?: ColorArray;
    /**
     * The overall size of the component.
     *
     * Options:
     * - `'sm'`: 96 X 96px.
     * - `'md'`: 192 X 192px (default).
     * - `'lg'`: 320 X 320px.
     * - `'xl'`: 600 X 600px.
     * - `'full'`: Full width of parent container.
     *
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /**
     * The size of the border around the image.
     *
     * Options:
     * - `'sm'`: 3% width of parent container.
     * - `'md'`: 5% (default).
     * - `'lg'`: 7%.
     * - `'xl'`: 8%.
     *
     * @default 'md'
     */
    border?: 'sm' | 'md' | 'lg' | 'xl';
    /**
     * The size of the gap between the border and the image.
     *
     * Options:
     * - `'sm'`: 2% width of parent container.
     * - `'md'`: 3% (default).
     * - `'lg'`: 7%.
     * - `'none'`: No padding.
     *
     * @default 'md'
     */
    padding?: 'sm' | 'md' | 'lg' | 'none';
    /**
     * An optional number used to speed up or slow down the spin animation.
     *
     * - Recommended range: 0 to 10.
     * - Higher values increase animation speed (relative to scroll speed)
     * - Lower values slow it down.
     *
     * @default 1
     */
    speedFactor?: number;
}

export { }