This package has been deprecated

Author message:

Please use @snackstack/material-ui instead

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

Method	Command
npm	npm install snackstack
yarn	yarn add snackstack

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