React Material-UI Cookbook

How it works...

Let's start by looking at the MySnackbar component that was created in this example:

const MySnackbar = ({ transition, direction, ...rest }) => (  <Snackbar    TransitionComponent={      { slide: Slide, grow: Grow, fade: Fade }[transition]    }    TransitionProps={{ direction }}    {...rest}  />);

There are two properties of interest here. The first is the transition string. This is used to look up the transition component to use. For example, the string slide will use the Slide component. The resulting component is used by the TransitionComponent property. The Snackbar components will use this component internally to apply the desired transition to your snackbars. The direction property is used with the Slide transition, which is why this property ...