🍫 React Snackbar Alert

Custom Snackbar Component

For greater customization of the snackbar component, a custom component can be used. Create your custom snackbar component and pass it as the component prop to the SnackbarProvider. The component will receive a message prop with the message to display.

import React from 'react';

import { SnackbarProvider, wrapComponent } from 'react-snackbar-alert';

import CustomSnackbarComponent from './CustomSnackbarComponent';

export default function CustomComponentExample() {
  return (
    <SnackbarProvider component={CustomSnackbarComponent}>
      <Container />
    </SnackbarProvider>
  );
}

const Container = wrapComponent(function({ createSnackbar }) {
  function showSnackbar() {
    createSnackbar({
      message: 'Hello Snackbar!'
    });
  }

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

import React from 'react';

export default function CustomSnackbarComponent({ message }) {
  return (
    <div
      style={{
        background: '#FF0000',
        color: '#FFFFFF',
        padding: '0.5em',
        marginBottom: '0.5em'
      }}
    >
      {message}
    </div>
  );
}