🍫 React Snackbar Alert

Extending the Snackbar Component

You can also extend the default Snackbar component. This allows you to keep the default styling and animation, but also add your own child content to the snackbar.

To extend the default component, import the Snackbar component and use it in your custom component. Make sure to pass all received props along to the Snackbar component, or else the animations won't work.

CustomChildComponentExample.js
CustomSnackbarComponent.js

import React from 'react';

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

import CustomSnackbarComponent from './CustomSnackbarComponent';

export default function CustomChildComponentExample() {
  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';
import { Snackbar } from 'react-snackbar-alert';

export default function CustomSnackbarComponent(props) {
  return (
    <Snackbar {...props}>
      <h2 style={{ margin: 0 }}>{props.message}</h2>
    </Snackbar>
  );
}