Unmounting components

When animating React components in and out of the DOM, the useMount() hook and MountedBlock HOC in React UI Animate offer a simple, declarative way to orchestrate entry and exit transitions.

import React, { useState } from 'react';
import { animate, useMountedValue } from 'react-ui-animate';

const Unmounting = () => {
  const [visible, setVisible] = useState(true);

  const open = useMountedValue(visible, {
    from: 0,
    enter: 1,
    exit: 0,
  });

  return (
    <div style={{ padding: 20, marginBottom: 20 }}>
      {open(
        (animation, mounted) =>
          mounted && (
            <animate.div
              style={{
                width: 100,
                height: 100,
                backgroundColor: '#31915f',
                borderRadius: 4,
                opacity: animation.value,
                marginBottom: 10,
              }}
            />
          )
      )}

      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Hide' : 'Show'}
      </button>
    </div>
  );
};

export default Unmounting;

Open Sandbox

Using useMount()

The useMount(open) hook returns a function that drives mount and unmount animations based on a boolean state (open). It takes no config argument, defaulting to a smooth ease animation.

import React from 'react';
import { animate, bInterpolate, useMount } from 'react-ui-animate';

export const UseMount: React.FC = () => {
  const [open, setOpen] = React.useState(true);
  const mounted = useMount(open);

  return (
    <>
      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>

      {mounted(
        (animation, isMounted) =>
          isMounted && (
            <>
              <animate.div
                style={{
                  width: bInterpolate(animation.value, 100, 300),
                  height: bInterpolate(animation.value, 100, 200),
                  backgroundColor: bInterpolate(
                    animation.value,
                    'red',
                    '#3399ff'
                  ),
                  translateX: 45,
                }}
              />
              <animate.div
                style={{
                  width: bInterpolate(animation.value, 100, 400),
                  height: bInterpolate(animation.value, 100, 50),
                  border: '1px solid black',
                  backgroundColor: bInterpolate(
                    animation.value,
                    'red',
                    '#3399ff'
                  ),
                  translateX: 45,
                }}
              />
              <animate.div
                style={{
                  width: bInterpolate(animation.value, 100, 500),
                  height: 100,
                  backgroundColor: bInterpolate(
                    animation.value,
                    'red',
                    '#3399ff'
                  ),
                  translateX: 45,
                }}
              />
            </>
          )
      )}
    </>
  );
};

How It Works

1. State Toggle: A boolean open controls whether the children should mount.

2. Mount Function: useMount(open) returns mounted, a function that takes a render callback.

3. Render Callback: Called with (animation, isMounted).

   • animation.value animates from 0 → 1 on enter and 1 → 0 on exit (ease by default).
   • isMounted indicates whether to render content.

Using MountedBlock HOC

For a more concise API, wrap your JSX in MountedBlock. Pass the state prop and an optional enter modifier (e.g. withSpring(1)) for the mount animation.

import React from 'react';
import {
  MountedBlock,
  animate,
  bInterpolate,
  interpolate,
  withSpring,
} from 'react-ui-animate';

export const Mounted: React.FC = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <MountedBlock state={open} enter={withSpring(1)}>
        {(animation) => (
          <animate.div
            style={{
              width: 100,
              height: 100,
              backgroundColor: '#3399ff',
              translateX: bInterpolate(animation.value, 0, 500),
              borderRadius: interpolate(
                animation.value,
                [0.5, 1],
                ['0%', '100%'],
                { extrapolateLeft: 'clamp' }
              ),
            }}
          />
        )}
      </MountedBlock>

      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
    </>
  );
};

Props

• state (boolean): Controls mount (true) and unmount (false).
• from (number): Optional initial value (default 0).
• enter (modifier): Optional transition for entry (e.g. withSpring(1), withTiming(1)).
• exit (modifier): Optional transition for exit (e.g. withSpring(0), withTiming(0)).
• children (animation) => ReactNode: Render callback receiving an object with .value (0 → 1 range).

Summary

• useMount(open): Returns a mount function for granular control.
• MountedBlock: HOC for concise mount/unmount animations.
• bInterpolate: Fast two-value interpolation helper.
• interpolate: Full-feature interpolation across ranges.
• By combining these, you can orchestrate complex, multi-element mount/unmount transitions.

What's Next?

In the next section, we'll explore Animation Modifiers like combining springs, timing, and sequences for fine-grained control.