npm

Need private packages and team management tools?Check out npm Orgs. »

snackstack

1.3.0 • 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

6

version

1.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability