0.0.3 • Published 4 years ago

react-tal-toast v0.0.3

Weekly downloads
2
License
ISC
Repository
github
Last release
4 years ago

Description

This is a library for react. There are some common react components.

React-toast

A toast like android or IOS toast. Both work in PC and mobile.

Usage

import reactToast, { toast } from 'react-tal-toast'
class Toast extends Component {
  toastFromBottom = _ => {
    toast()
  }

  toastFromTop = _ => {
    toast({
      text: "Toast From Top",
      className: "bounceInDown",
      position: 'top'
    })
  }

  toastSuccess = _ => {
    reactToast.succee()
  }

  toastDangerCenter = () => {
    reactToast.danger({
      position: 'center',
      className: "zoomIn"
    })
  }
  
  render() {
    return (
      <div className="toast">
        <h1>React Toast</h1>
        <ul>
          <li onClick={this.toastFromBottom}>Info from Bottom</li>
          <li onClick={this.toastFromTop}>Info from top</li>
          <li onClick={this.toastSuccess}>Success</li>
          <li onClick={_ => reactToast.warning()}>Warning</li>
          <li onClick={this.toastDangerCenter}>Danger</li>
        </ul>
      </div>
    )
  }
}

props

propsvaluedefault
textThe message you want to display
classNameThe animation className(See https://daneden.github.io/animate.css/)fadeInUp
timeoutThe message show time2000
positionThe position of the message(one of top, bottom, center)bottom
0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago