STYLED MDL

Snackbar

Transient popup notifications.

Snackbar

/*--- Snackbar ---*/
class Demo extends Component {
  state = {
    messages: [],
    showMessage: false,
  }

  componentWillUpdate(nextProps, nextState) {
    if (
      nextState.messages[0] &&
      nextState.messages[0] !== this.state.messages[0]
    ) {
      this.setState({ showMessage: true })

      this.timeout = setTimeout(() => {
        this.setState({ showMessage: false })
        this.timeout = setTimeout(() => {
          this.setState({ messages: this.state.messages.slice(1) })
        }, 300)
      }, 2000)
    }
  }

  componentWillUnmount() {
    clearTimeout(this.timeout)
  }

  counter = 0

  increment = () => {
    this.counter += 1
    this.setState({
      messages: [...this.state.messages, { message: `Example message ${this.counter}` }],
    })
  }

  render() {
    return (
      <div>
        <Button raised onClick={this.increment} text="Show" />
        <Toast isActive={this.state.showMessage}>
          <Snackbar {...this.state.messages[0]} />
        </Toast>
      </div>
    )
  }
}

Snackbar with action

/*--- Snacbkar With Action ---*/
class Demo extends Component {
  state = {
    messages: [],
    showMessage: false,
    buttonColor: null,
  }

  componentWillUpdate(nextProps, nextState) {
    if (
      nextState.messages[0] &&
      nextState.messages[0] !== this.state.messages[0]
    ) {
      this.setState({ showMessage: true })

      this.timeout = setTimeout(() => {
        this.setState({ showMessage: false })
        this.timeout = setTimeout(() => {
          this.setState({ messages: this.state.messages.slice(1) })
        }, 300)
      }, 2000)
    }
  }

  componentWillUnmount() {
    clearTimeout(this.timeout)
  }

  changeButtonColor = () => {
    this.counter += 1
    this.setState({
      buttonColor: `#${Math.floor(Math.random() * 0xffffff).toString(16)}`,
      messages: [
        ...this.state.messages,
        {
          message: 'Button color changed',
          actionText: 'Undo',
          actionHandler: () => this.setState({ buttonColor: null }),
        },
      ],
    })
  }

  render() {
    return (
      <div>
        <Button
          raised
          style={{ background: this.state.buttonColor }}
          onClick={this.changeButtonColor}
          text="Show"
        />
        <Toast isActive={this.state.showMessage}>
          <Snackbar {...this.state.messages[0]} />
        </Toast>
      </div>
    )
  }
}

Usage

TODO: these components need some clarification and their demos are kinda bad

<Snackbar>

PropTypeDefaultDescription
messagestringundefinedThe brief message to be displayed in the snacbkar
actionTextstringundefinedThe text to show for the snackbar action
actionHandlercallbackundefinedThis is called when the snackbar action is clicked

<Toast>

PropTypeDefaultDescription
isActivebooleanfalseThe toast will animate in when this becomes true, and animate out if it becomes false
positionenum left|rightleftDetermines wheter or not to display toast on bottom left or bottom right side of the screen.