Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

snackstack

1.3.2 • Public • Published

snackstack

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

Table of Contents

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

Install

npm i snackstack

DownloadsWeekly Downloads

0

Version

1.3.2

License

MIT

Unpacked Size

42.7 kB

Total Files

13

Last publish

Collaborators

  • avatar