next
Version:
The React Framework
36 lines (35 loc) • 965 B
TypeScript
interface Options {
enterDelay?: number;
exitDelay?: number;
onUnmount?: () => void;
}
/**
* Useful to perform CSS transitions on React components without
* using libraries like Framer Motion. This hook will defer the
* unmount of a React component until after a delay.
*
* @param active - Whether the component should be rendered
* @param options - Options for the delayed render
* @param options.enterDelay - Delay before rendering the component
* @param options.exitDelay - Delay before unmounting the component
*
* const Modal = ({ active }) => {
* const { mounted, rendered } = useDelayedRender(active, {
* exitDelay: 2000,
* })
*
* if (!mounted) return null
*
* return (
* <Portal>
* <div className={rendered ? 'modal visible' : 'modal'}>...</div>
* </Portal>
* )
*}
*
* */
export declare function useDelayedRender(active?: boolean, options?: Options): {
mounted: boolean;
rendered: boolean;
};
export {};