A convenient way to use Material-UI's Snackbar.

demo.js

import React from 'react'
import { render } from 'react-dom'
import SnackbarProvider from './SnackbarProvider'

export class DemoComponent extends React.Component {
  render () {
    return (
      <button onClick={() => this.context.snackbar.showMessage('Hello world')}>Click me</button> 
    )
  }
}

DemoComponent.contextTypes = {
  snackbar: PropTypes.shape({
    showMessage: PropTypes.func
  })
}

render((<SnackbarProvider><DemoComponent /></SnackbarProvider>), document.getElementById('react-target'))

SnackbarProvider.js

import React, { Component, PropTypes } from 'react'
import Snackbar from 'material-ui/Snackbar'

export default class SnackbarProvider extends Component {
  constructor (props) {
    super(props)
    this.state = {
      message: null,
      open: false
    }
  }

  getChildContext () {
    return {
      snackbar: {
        showMessage: this.showMessage.bind(this)
      }
    }
  }

  showMessage (message, action, handleAction) {
    this.setState({ open: true, message, action, handleAction })
  }

  handleActionTouchTap () {
    this.handleRequestClose()
    this.state.handleAction()
  }

  handleRequestClose () {
    this.setState({ open: false, message: null, action: null, handleAction: null })
  }

  render () {
    return (
      <div style={{ width: 'inherit', height: 'inherit' }}>
        {this.props.children}
        <Snackbar
          open={this.state.open}
          message={this.state.message}
          action={this.state.action}
          autoHideDuration={4000}
          onActionTouchTap={() => this.handleActionTouchTap()}
          onRequestClose={() => this.handleRequestClose()}
        />
      </div>
    )
  }
}

SnackbarProvider.childContextTypes = {
  snackbar: PropTypes.shape({
    showMessage: PropTypes.func
  })
}