How can I customize snackbars in React?

How can I customize snackbars in React?

You can customize snackbars in React by using the Material-UI library or by creating your own component. Would you like to see an example?

Yes, please show me an example using Material-UI.

Sure! First, install Material-UI: npm install @mui/material @emotion/react @emotion/styled. Then, you can create a snackbar like this:

import Snackbar from '@mui/material/Snackbar';
import MuiAlert from '@mui/material/Alert';

const CustomSnackbar = ({ open, handleClose, message }) => {
  return (
    <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
      <MuiAlert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
        {message}
      </MuiAlert>
    </Snackbar>
  );
};

This will create a customizable snackbar with an alert style. You can change the severity and styles as needed.

How do I control the open state of the snackbar?

You can control the open state using React's useState hook. Here's an example:

const [open, setOpen] = useState(false);

const handleClick = () => {
  setOpen(true);
};

const handleClose = (event, reason) => {
  if (reason === 'clickaway') {
    return;
  }
  setOpen(false);
};

You can call handleClick to open the snackbar and handleClose to close it.