snackstack
Easy-to-use extension of Material-UI, which allows the stacking of Snackbar notification messages.
Last updated 17 days ago by tobiastengler .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install snackstack 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.3.0                                ...           latest (17 days ago)

24 Versions

  • 1.3.0                                ...           17 days ago
  • 1.2.0                                ...           17 days ago
  • 1.1.3                                ...           18 days ago
  • 1.1.1                                ...           18 days ago
  • 1.0.3                                ...           24 days ago
  • 1.0.2                                ...           25 days ago
  • 1.0.1                                ...           25 days ago
  • 1.0.0                                ...           a month ago
  • 1.0.0-rc1                                ...           a month ago
  • 0.0.14                                ...           3 years ago
  • 0.0.13                                ...           3 years ago
  • 0.0.12                                ...           3 years ago
  • 0.0.11                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 3.0.4                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 44
Last Day 1
Last Week 0
Last Month 204
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |