notistack

Basic Snackbar

This code demonstrates how to display a basic snackbar using notistack. The `SnackbarProvider` component wraps the application, and the `useSnackbar` hook is used to trigger the snackbar.

import React from 'react';
import { SnackbarProvider, useSnackbar } from 'notistack';

function App() {
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar('This is a basic snackbar');
  };

  return (
    <div>
      <button onClick={handleClick}>Show Snackbar</button>
    </div>
  );
}

export default function IntegrationNotistack() {
  return (
    <SnackbarProvider maxSnack={3}>
      <App />
    </SnackbarProvider>
  );
}

Custom Snackbar Variants

This code demonstrates how to display snackbars with different variants (success, error, warning, info) using notistack. The `enqueueSnackbar` function is called with a variant option to customize the type of snackbar.

import React from 'react';
import { SnackbarProvider, useSnackbar } from 'notistack';

function App() {
  const { enqueueSnackbar } = useSnackbar();

  const handleClickVariant = (variant) => () => {
    enqueueSnackbar('This is a ' + variant + ' snackbar', { variant });
  };

  return (
    <div>
      <button onClick={handleClickVariant('success')}>Show Success Snackbar</button>
      <button onClick={handleClickVariant('error')}>Show Error Snackbar</button>
      <button onClick={handleClickVariant('warning')}>Show Warning Snackbar</button>
      <button onClick={handleClickVariant('info')}>Show Info Snackbar</button>
    </div>
  );
}

export default function IntegrationNotistack() {
  return (
    <SnackbarProvider maxSnack={3}>
      <App />
    </SnackbarProvider>
  );
}

Custom Snackbar Styling

This code demonstrates how to apply custom styling to a snackbar using notistack. The `makeStyles` function from Material-UI is used to create custom styles, which are then applied to the snackbar via the `enqueueSnackbar` function.

import React from 'react';
import { SnackbarProvider, useSnackbar } from 'notistack';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  customSnackbar: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
  },
}));

function App() {
  const classes = useStyles();
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar('This is a custom styled snackbar', {
      classes: {
        root: classes.customSnackbar,
      },
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Show Custom Styled Snackbar</button>
    </div>
  );
}

export default function IntegrationNotistack() {
  return (
    <SnackbarProvider maxSnack={3}>
      <App />
    </SnackbarProvider>
  );
}