React Material-UI Cookbook

How to do it...

Let's say that you want to make it easier to change the transition used by snackbars throughout your application. You could create a thin wrapper component around Snackbar that takes care of setting the appropriate properties. Here's what the code looks like:

import React, { Fragment, useState } from 'react';import Grid from '@material-ui/core/Grid';import Button from '@material-ui/core/Button';import Snackbar from '@material-ui/core/Snackbar';import Slide from '@material-ui/core/Slide';import Grow from '@material-ui/core/Grow';import Fade from '@material-ui/core/Fade';const MySnackbar = ({ transition, direction, ...rest }) => (  <Snackbar    TransitionComponent={      { slide: Slide, grow: Grow, fade: Fade }[transition]    } TransitionProps={{ ...