Nanobots Protecting Microbots

    This package has been deprecated

    Author message:

    Please use @snackstack/material-ui instead

    snackstack
    TypeScript icon, indicating that this package has built-in type declarations

    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

    36

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    42.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • tobiastengler