use-delayed-render
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    useDelayedRender npm bundle size

    useDelayedRender is a react hook for delaying the render and unmount of a component. This is commonly used to animate UI on unmount.


    Installation

    $ yarn add use-delayed-render
    

    Usage

    Function signature:

    const { mounted: boolean, rendered: boolean } = useDelayedRender(
      activeboolean,
      options?: {
        enterDelay: number,
        exitDelay: number,
        onUnmount: () => void
      }
    )

    Options:

    • active: Whether your component is in an active state
    • enterDelay: After mounting, the delay before rendered becomes true
    • exitDelay: After rendered becomes false, the delay before unmounting
    • onUnmount: A callback triggered after unmounting

    Return values:

    • mounted: Whether your component should be mounted in the DOM
    • rendered: Whether your component should be visible

    Example

    Render a modal, but delay the unmount so that our 2 second CSS transition completes before the modal is removed from the DOM.

    const Modal = ({ active }) => {
      const { mounted, rendered } = useDelayedRender(active, {
        exitDelay: 2000,
      })
     
      if (!mounted) return null
     
      return (
        <Portal>
          <div className={rendered ? 'modal visible' : 'modal'}>{/* ... */}</div>
        </Portal>
      )
    }

    This allows you to use simple CSS transitions to animate the mounting/unmounting of your component.

    .modal {
      opacity: 0;
      transition: opacity 2s ease;
    }
     
    .modal.visible {
      opacity: 1;
    }

    Why?

    • Usually you would use react-transition-group to solve this, but the 2.37MB install size is a bit overkill, compared to this package at 491B gzipped.
    <Transition in={active} unmountOnExit timeout={200} onExited={handleExit}>
      <Modal />
    </Transition>
    • Hooks solve the problem without needing a render function or HOC.

    Keywords

    none

    Install

    npm i use-delayed-render

    DownloadsWeekly Downloads

    2,687

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    5.46 kB

    Total Files

    8

    Last publish

    Collaborators

    • paco