react-circular-reveal
Version:
Quickly and easily add Material Design's "Circular Reveal" animation in your web app.
23 lines (22 loc) • 957 B
TypeScript
import React from 'react';
import './CircularRevealPanel.css';
export declare type EventType = 'CURTAIN_OPENING' | 'CURTAIN_OPENED' | 'CURTAIN_CLOSING' | 'CURTAIN_CLOSED';
export declare type RevealSpeed = 'very slow' | 'slow' | 'normal' | 'fast';
export declare class CurtainEvent {
type: EventType;
curtainElemRef: HTMLDivElement;
revealContentElemRef: HTMLDivElement;
constructor(type: EventType, curtainElemRef: HTMLDivElement, revealContentElemRef: HTMLDivElement);
}
export declare type CalculateCurtainSize = (currentCurtainSize: number, opening: boolean) => number;
interface Props {
reveal?: boolean;
contentMinWidth?: number;
children?: React.ReactNode;
revealContent?: React.ReactNode;
revealCurtainContent?: React.ReactNode;
speed?: RevealSpeed | CalculateCurtainSize;
onChange?: (e: CurtainEvent) => void;
}
export declare const CircularRevealPanel: React.FC<Props>;
export {};