snackstack v0.0.0-experimental-7c9486721

snackstack

Easy-to-use extension of Material-UI, which allows the stacking of Snackbar notification messages.

Table of Contents

• Installation
• Getting started
• Handling Notifications
• Documentation

Installation

Getting started

Wrap all components, which should be able to enqueue or close Snackbar Notifications, in a SnackProvider:

import { SnackProvider } from 'snackstack';

ReactDOM.render(
  <SnackProvider>
    <App />
  </SnackProvider>,
  document.getElementById('root'),
);

If you're using MuiThemeProvider make sure that you place the SnackProvider inside of it.

Handling Notifications

withSnacks

The withSnacks HOC injects the enqueueSnack and closeSnack function into your component's props:

import { withSnacks } from 'snackstack';

class ExampleComponent extends React.Component {
  handleEnqueueClick = () => {
    const { enqueueSnack } = this.props;

    enqueueSnack({ message: 'Hello World', key: 'key123' });
  };

  handleCloseClick = () => {
    const { closeSnack } = this.props;

    closeSnack('key123');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleEnqueueClick}>Enqueue</button>
        <button onClick={this.handleCloseClick}>Close</button>
      </div>
    );
  }
}

export default withSnacks(ExampleComponent);

useSnacks

The useSnacks Hook returns an array containing the enqueueSnack and closeSnack function:

import { useSnacks } from 'snackstack';

const ExampleComponent = () => {
  const [enqueueSnack, closeSnack] = useSnacks();

  const handleEnqueueClick = () => {
    enqueueSnack({ message: 'Hello World', key: 'key123' });
  };

  const handleCloseClick = () => {
    closeSnack('key123');
  };

  return (
    <div>
      <button onClick={handleEnqueueClick}>Enqueue</button>
      <button onClick={handleCloseClick}>Close</button>
    </div>
  );
};

export default ExampleComponent;

If you're unfamiliar with Hooks I suggest this article as an introduction.

Documentation

Not yet available