Showtime

Mount & unmount React elements with CSS transitions 🥁🎭

React Showtime makes it easy to apply CSS transitions to the appearance and disappearance of React elements. It automatically handles mounting and unmounting to allow time for transitions to occur.

Choose between useShowtime hook and <Showtime> component.
Feels familiar: useShowtime is a near-drop-in replacement for conditional rendering with a state boolean.
Specify showing styles however you like – inline, Emotion, styled-components, classnames, you name it.
Sensible API for defining hidden styles and custom transitions.
Included transitions: slideFade, slide, fade, rise, scale.
Symmetric or asymmetric show/hide transitions.
Zero dependencies. 3.4k min+gzip.

Examples below. For API and further details, see the README.

useShowtime()

Defaults

Default transition (slideFade), duration (250ms), delay (16ms), and easing (ease).


// import { useShowtime } from "react-showtime";

function Container() {
  const [ref, isMounted, show, hide] = useShowtime();

  return (
    <>
      {isMounted && <RandomEmoji ref={ref} />}
      <RandomEmoji />
      <Button
        onClick={isMounted ? hide : show}
        label={isMounted ? "Hide" : "Show"}
      />
    </>
  );
}

🕺

👯

Transitions

Pass a transition name, here using default duration, delay, and easing.


// import { useShowtime } from "react-showtime";

function Container() {
  const [ref, isMounted, show, hide] = useShowtime("slideFade");

  return (
    <>
      {isMounted && <RandomEmoji ref={ref} />}
      <RandomEmoji />
      <Button
        onClick={isMounted ? hide : show}
        label={isMounted ? "Hide" : "Show"}
      />
    </>
  );
}

🎭

🕺

Timing

Use duration, delay, and easing to customize timing.


// import { useShowtime } from "react-showtime";

function Container() {
  const [ref, isMounted, show, hide] = useShowtime({
    transition: "scale",
    duration: 600,
    delay: 250,
    easing: "linear",
  });

  return (
    <>
      {isMounted && <RandomEmoji ref={ref} />}
      <Button
        onClick={isMounted ? hide : show}
        label={isMounted ? "Hide" : "Show"}
      />
    </>
  );
}

🕴

Custom transitions

Define a custom transition's hidden state via the transition property.


// import { useShowtime } from "react-showtime";

function Container() {
  const [ref, isMounted, show, hide] = useShowtime({
      transition: {
        transform: "translateY(400px) rotate(180deg)",
        opacity: 0,
      },
  });

  return (
    <>
      {isMounted && <RandomEmoji ref={ref} />}
      <Button
        onClick={isMounted ? hide : show}
        label={isMounted ? "Hide" : "Show"}
      />
    </>
  );
}

🎭

Asymmetric

Use different transitions for showing and hiding with showTransition and hideTransition.


// import { useShowtime } from "react-showtime";

function Container() {
  const [ref, isMounted, show, hide] = useShowtime({
    showTransition: {
      transform: "translateY(400px) rotate(180deg)",
      opacity: 0,
    },
    hideTransition: "fade",
  });

  return (
    <>
      {isMounted && <RandomEmoji ref={ref} />}
      <Button
        onClick={isMounted ? hide : show}
        label={isMounted ? "Hide" : "Show"}
      />
    </>
  );
}

🕺

Extravaganza

A whole bunch of stuff… Asymmetric transitions. Per-property timing. Start hidden.


// import { useShowtime } from "react-showtime";

function Container() {
  const [ref, isMounted, show, hide] = useShowtime({
      startHidden: true,
      showTransition: {
        transform: "translateY(-200%)",
      },
      showDuration: 200,
      showEasing: "cubic-bezier(0.16, 2.04, 0.41, 1.67)",
      hideTransition: {
        transform: "translateX(300%)",
        opacity: {
          value: 0,
          delay: 100,
          duration: 200,
        },
      },
      hideDuration: 300,
      hideEasing: "cubic-bezier(0, -0.4, 0.54, -0.34)",
  });

  return (
    <>
      {isMounted && <RandomEmoji ref={ref} />}
      <Button
        onClick={isMounted ? hide : show}
        label={isMounted ? "Hide" : "Show"}
      />
    </>
  );
}