Skip to content

🎉 Material UI v5 is out! Head to the migration guide to get started.

Grow API

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

Import

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

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

The Grow transition is used by the Tooltip and Popover components. It uses react-transition-group internally.

Props

Name Type Default Description
children element A single child content element.
disableStrictModeCompat bool false Enable this prop if you encounter 'Function components cannot be given refs', use unstable_createStrictModeTheme, and can't forward the ref in the child component.
in bool If true, show the component; triggers the enter or exit animation.
timeout 'auto'
| number
| { appear?: number, enter?: number, exit?: number }
'auto' The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height.

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