kulakowka / material-ui-snackbar-provider

A convenient way to use material-ui's snackbars.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Material-UI Snackbar Provider

JavaScript Style Guide Build Status Coverage Status

A convenient way to use material-ui's snackbars.

Installation

npm i --save material-ui-snackbar-provider@next

Usage

Simply wrap all components that should display snackbars with the SnackbarProvider component, e.g. by wrapping your router with it.

import { SnackbarProvider } from 'material-ui-snackbar-provider'

// somewhere at the root of your app
<SnackbarProvider snackbarProps={{ autoHideDuration: 4000 }}>
  {/* the rest of your app belongs here, e.g. the router */}
</SnackbarProvider>

You can then display messages with the withSnackbar HOC and the injected snackbar prop in your components.

import { withSnackbar } from 'material-ui-snackbar-provider'

class MyComponent {
  // *snip*

  handleSomething () {
    this.props.snackbar.showMessage(
      'Something happened!',
      'Undo', () => this.handleUndo())
  }

  handleUndo () {
    // *snip*
  }
}

export default withSnackbar()(MyComponent) // export the wrapped component

SnackbarProvider Props

Name Type Default Description
children node The children that are wrapped by this provider.
SnackbarProps object Props to pass through to the snackbar.
style object Override the inline-styles of the root element.

* required property

Snackbar methods

snackbar.showMessage(message, [action, handler])

  • message (string) – message to display
  • action (string, optional) – label for the action button
  • handler (function, optional) – click handler for the action button

Concerns

Dude, this is not pretty React-like, I don't want to call a function to do something that changes the UI! I want to display a snackbar based on the state only, e.g. by using Redux.

I agree. And if it wouldn't be an absolute pain to do that if you intend to display more than one snackbar, this package wouldn't even exist. The thing is that most of the time, snackbars are displayed when state changes and not really depend on the state itself.

Also, calling a method after dispatching the action is pretty convenient, especially when using something like redux-thunk:

deleteEmail (id) {
  this.props.dispatch(someReduxThunkAction())
  .then(() => {
    this.snackbar.showMessage(
      'E-mail deleted',
      'Undo', () => this.restoreEmail(id))
  })
  .catch((e) => {
    this.snackbar.showMessage(
      'E-mail could not be deleted',
      'Retry', () => this.deleteEmail(id))
  })
}

So this package makes snackbars a lot easier to use, which is all it's intended to do.

License

The files included in this repository are licensed under the MIT license.

ezoic increase your site revenue

About

A convenient way to use material-ui's snackbars.

License:MIT License


Languages

Language:JavaScript 100.0%