🍫 React Snackbar Alert

Passing Custom Data to a Custom Component

You can also create more rich snackbar notifications by passing arbitrary data that can be used when rendering a custom snackbar component.

Simply pass a data property in the object passed to createSnackbar, then reference the data attributes in your custom component's render function.

import React from 'react';

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

import CustomSnackbarComponent from './CustomSnackbarComponent';

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

const Container = wrapComponent(function({ createSnackbar }) {
  function showSnackbar() {
    createSnackbar({
      data: {
        action: 'Retry'
      },
      theme: 'error',
      message: 'Connection Error'
    });
  }

  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}>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <div style={{ margin: '0.5em', flexGrow: 1 }}>{props.message}</div>
        <button
          style={{
            marginRight: '0.5em',
            background: 'transparent',
            border: '1px solid #FFFFFF',
            color: '#FFFFFF',
            fontSize: '0.8em',
            borderRadius: '5px'
          }}
        >
          {props.data.action}
        </button>
      </div>
    </Snackbar>
  );
}