🍫 React Snackbar Alert

Position

By default, snackbars appear at the bottom center of the screen. This can be changed via the position prop on the SnackbarProvider. Valid values are:

  • top
  • top-left
  • top-right
  • bottom
  • bottom-left
  • bottom-right
import React from 'react';

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

export default function TopExample() {
  return (
    <SnackbarProvider position="top">
      <Container />
    </SnackbarProvider>
  );
}

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

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