React Mount Transition

React Mount Transition is a minimal library of React utilities that allow an element to be transitioned in and out on mount without needing to already be rendered in the DOM. It is perfect for overlay components such as tooltips, popovers and modals.

How To Use?

npm i react-mount-transform

yarn add react-mount-transform

The react-mount-transition exposes two utilities:

useMountTransition Hook

<MountTransition /> Component

useMountTransition Hook

To get started, first import the hook into a React file.

import { useMountTransition } from 'react-mount-transition';

Then instantiate the hook within a component with the two required arguments, duration and isShown.

const { showTransitionElement, withTransitionStyles } = useMountTransition({
    duration: 150, // transition duration in milliseconds (ms)
    isShown: itemIsShown, // boolean toggle for when to render the element
});

The useMountTransition hook returns two properties to handle the mounting and transitioning of an element. In practice, these properties all work together to handle when to render and transition an element.

export function Sample(itemIsShown: boolean) {
    const { showTransitionElement, transitionElementAttrs, withTransitionStyles } = useMountTransition({
      duration: 150,
      isShown: itemIsShown,
    });

    return (
      showTransitionElement ? (
        <div className={withTransitionStyles ? styles.slideIn : ''} {...transitionElementAttrs}>
          ...
        </div>
      ) : null;
    )
  }

Arguments

Return

<MountTransition /> Component

In some situations the useMountTransition hook won’t work, for example, if iterating over children, or conditionally rendering an element. In those instances, the <MountTransition> wrapper component can be used.

The <MountTransition> component uses the useMountTransition hook under the hood.

To get started, first import the component into a React file.

import { MountTransition } from 'react-mount-transition';

Use the <MountTransition /> component to wrap the transitioning element, providing the required props: duration, isShown and transitionClassName.

return (
    <MountTransition
        duration={150}
        showPanel={itemIsShown}
        transitionClassName={styles.slideIn}
    >
        <div className="some-transitioning-element"> ... </div>
    </MountTransition>
);

Arguments

GitHub

View Github