.
This commit is contained in:
+35
@@ -0,0 +1,35 @@
|
||||
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 {};
|
||||
Reference in New Issue
Block a user