This package has been deprecated

Author message:

move to @the-/ui-toast ( https://github.com/the-labo/the/tree/master/packages/ui-toast#readme )

the-toast

Toast of the-components

Installation

$ npm install the-toast --save

Usage

Live Demo is hosted on GitHub Page

'use strict'
 
import React from 'react'
import { TheToast, TheToastGroup, TheToastStyle } from 'the-toast'
 
class ExampleComponent extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      messages: {
        normal: ['This is normal', 'This is normal 2'],
        info: ['This is info', 'This is info 2'],
        warn: ['This is warn', 'This is warn 2'],
        error: ['This is error', 'This is error 2']
      }
    }
  }
 
  render() {
    const { messages } = this.state
    const onUpdate = (values) => this.setState({
      messages: Object.assign({}, this.state.messages, values)
    })
    return (
      <React.StrictMode>
        <div>
          <TheToastStyle />
          <TheToastGroup>
            <TheToast.Normal onUpdate={onUpdate} messages={messages.normal} />
            <TheToast.Info onUpdate={onUpdate} messages={messages.info} clearAfter={1200} />
            <TheToast.Warn onUpdate={onUpdate} messages={messages.warn} />
            <TheToast.Error onUpdate={onUpdate} messages={messages.error} />
          </TheToastGroup>
        </div>
      </React.StrictMode>
    )
  }
}
 
export default ExampleComponent
 

Components

TheToast

Toast of the-components

Props

Name	Type	Description	Default
clearAfter	number	Clear message after seconds	-1
level	enum	Level of toast	'normal'
messages	arrayOf node	Messages to show	``
onUpdate	func	Handle update	``
role			'alert'
transitionTimeout			100

TheToastGroup

ToastGroup

TheToastStyle

Style for TheToast

Props

Name	Type	Description	Default
options	object	Style options	{}

License

This software is released under the MIT License.

Links

• THE Labo