1.0.0 • Published 5 years ago

react-simple-toaster v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

React Simple Toast message

Simple Toast message React package

NPM JavaScript Style Guide

Install

npm install --save react-simple-toaster

Usage

Functional Component

import React from 'react'

import { useToastShow, ToastProvider } from 'react-simple-toaster'
import 'react-simple-toaster/dist/index.css'

const App = () => {
  const showToast = useToastShow()
  return (
    <button onClick={() => showToast('This is a cool toast message', 10000)}>
      Show Toast
    </button>
  )
}
const ToastWrapper = () => (
  <ToastProvider>
    <App />
  </ToastProvider>
)
export default ToastWrapper

Class based component

import React from 'react'
import { withShowToast } from 'react-simple-toaster'

class ClassComponent extends React.Component {
  render() {
    const { showToast } = this.props
    return (
      <div className='container'>
        <h1>Class Component</h1>
        <br />
        <button
          className='btn'
          onClick={() => showToast('Toast from Class based component')}
        >
          ClassComponent Button
        </button>
      </div>
    )
  }
}
export default withShowToast(ClassComponent)

Params

showToast(msg, timeout, theme, className, customStyle)
ParamValue
msgstring
timeoutmiliseconds
themelight(default), dark, danger, success, warning, info
classNamecustom class name
customStyle{ toaster: {}, button: {}}

Demo

Check demo here

License

MIT © premsahni0501

1.0.0

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago