react-orbit-component/dist/index.d.mts

A Orbit component for React.

import React from 'react';

type OrbitPathTypes = 'circle';
interface OrbitPathProps {
    className?: string;
    children?: React.ReactNode;
    type: OrbitPathTypes;
    style?: React.CSSProperties;
}
/**
 * @description
 * OrbitPath is a component that creates a circular path for OrbitItems to follow.
 * @property width & height - Should be the same size.
 * @param className - Optional class name to add to the component.
 * @param children - The OrbitItems to be placed on the path.
 * @param type - The type of path to create.
 * @example <caption>Creating a circular path</caption>
 * <OrbitPath type="circle">
 *    <OrbitItem></OrbitItem>
 * </OrbitPath>
 */
declare const OrbitPath: React.FC<OrbitPathProps>;

type OrbitItemDirection = 'clockwise' | 'counter-clockwise';
type OrbitItemProps = {
    className?: string;
    children?: React.ReactNode;
    radius?: number;
    anglePerStep?: number;
    timeBetweenSteps?: number;
    startAngle?: number;
    direction?: OrbitItemDirection;
    style?: React.CSSProperties;
    angle?: number;
} & React.HTMLAttributes<HTMLDivElement>;
/**
 * OrbitItem is a component that moves around a circle path.
 * @param className - The class name of the component.
 * @param children - The children of the component.
 * @param radius - The radius of the circle used by the parent component.
 * @param anglePerStep - The angle per step in degrees.
 * @param timeBetweenSteps - The time between steps in milliseconds.
 * @param startAngle - The start angle.
 * @param direction - The direction of the orbit.
 * @param style - The style of the component.
 * @param angle - The angle of the component.
 * @param ref - The ref of the component.
 * @returns The component.
 * @example
 * ```tsx
 * <OrbitItem direction="clockwise" startAngle={120} step={0.2} className={SHARED_CLASSNAME}>
 *   😀
 * </OrbitItem>
 */
declare const OrbitItem: React.ForwardRefExoticComponent<{
    className?: string;
    children?: React.ReactNode;
    radius?: number;
    anglePerStep?: number;
    timeBetweenSteps?: number;
    startAngle?: number;
    direction?: OrbitItemDirection;
    style?: React.CSSProperties;
    angle?: number;
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const calculateCoordinatesOnCircle: (radius: number, angle: number, boundingClientRect: DOMRect) => {
    x: number;
    y: number;
};

export { OrbitItem, type OrbitItemProps, OrbitPath, type OrbitPathTypes, calculateCoordinatesOnCircle };