react-peel/dist/index.d.mts

react-peel is a react library to create realistic peeling effects. No dependencies.

import React$1, { RefObject, ReactNode } from 'react';

declare namespace PeelCorners {
    let TOP_LEFT: number;
    let TOP_RIGHT: number;
    let BOTTOM_LEFT: number;
    let BOTTOM_RIGHT: number;
}

interface PeelOptions {
    topShadow?: boolean;
    topShadowBlur?: number;
    topShadowAlpha?: number;
    topShadowOffsetX?: number;
    topShadowOffsetY?: number;
    topShadowCreatesShape?: boolean;
    backReflection?: boolean;
    backReflectionSize?: number;
    backReflectionOffset?: number;
    backReflectionAlpha?: number;
    backReflectionDistribute?: boolean;
    backShadow?: boolean;
    backShadowSize?: number;
    backShadowOffset?: number;
    backShadowAlpha?: number;
    backShadowDistribute?: boolean;
    corner?: keyof typeof PeelCorners;
    bottomShadow?: boolean;
    bottomShadowSize?: number;
    bottomShadowOffset?: number;
    bottomShadowDarkAlpha?: number;
    bottomShadowLightAlpha?: number;
    bottomShadowDistribute?: boolean;
    mode?: "book" | "calendar";
    setPeelOnInit?: boolean;
    clippingBoxScale?: number;
    flipConstraintOffset?: number;
    dragPreventsDefault?: boolean;
    shape?: SvgElementProps;
}
type TCoords = {
    x: number;
    y: number;
};
type HtmlDivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
type CircleProps = {
    cx: number;
    cy: number;
    r: number;
} & {
    [key: string]: any;
};
type PathProps = {
    d: string;
} & {
    [key: string]: any;
};
type RectProps = {
    x: number;
    y: number;
    width: number;
    height: number;
} & {
    [key: string]: any;
};
type PolygonProps = {
    points: string;
} & {
    [key: string]: any;
};
type SvgElementProps = {
    circle?: CircleProps;
    path?: PathProps;
    rect?: RectProps;
    polygon?: PolygonProps;
};
type Props = {
    ref?: RefObject<any>;
    className?: string;
    height?: string | number;
    width?: string | number;
    children?: ReactNode;
    options?: PeelOptions;
    peelPosition?: TCoords;
    corner?: TCoords | keyof typeof PeelCorners;
    constraints?: TCoords | keyof typeof PeelCorners | Array<TCoords | keyof typeof PeelCorners>;
    timeAlongPath?: number;
    drag?: boolean;
    handleDrag?: (event: MouseEvent, x: number, y: number, peel: any) => any;
    handlePress?: (event: MouseEvent, peel: any) => any;
    mode?: "book" | "calendar";
    fadeThreshold?: number;
    peelPath?: number[];
    containerProps?: Omit<HtmlDivProps, "ref" | "className">;
};

declare const PeelWrapper: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<unknown>>;
declare const PeelTop: React$1.ForwardRefExoticComponent<Omit<HtmlDivProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
declare const PeelBack: React$1.ForwardRefExoticComponent<Omit<HtmlDivProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
declare const PeelBottom: React$1.ForwardRefExoticComponent<Omit<HtmlDivProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;

export { PeelBack, PeelBottom, PeelTop, PeelWrapper };