Skip to content

Zoom API

The API documentation of the Zoom React component. Learn more about the props and the CSS customization points.

Import

import Zoom from '@material-ui/core/Zoom';
// or
import { Zoom } from '@material-ui/core';

You can learn more about the difference by reading this guide.

The Zoom transition can be used for the floating variant of the Button component. It uses react-transition-group internally.

Props

Name Type Default Description
appear bool true Perform the enter transition when it first mounts if in is also true. Set this to false to disable this behavior.
children element A single child content element.
⚠️ Needs to be able to hold a ref.
in bool If true, the component will transition in.
timeout number
| { appear?: number, enter?: number, exit?: number }
{ enter: duration.enteringScreen, exit: duration.leavingScreen,} The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (Transition).

Inheritance

The props of the Transition component, from react-transition-group, are also available. You can take advantage of this behavior to target nested components.

Demos