36 lines
965 B
TypeScript
36 lines
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 {};
|