react-toast-notification

Toast notification based on Bootstrap design.

Introduction

'react-toast-notification' allows you to put notification easily on your web apps.

Installation

    npm install react-toast-notification

Features

• Easy to use


• Single line import and you're ready to go


• Avoids extra inclusion or headache to include more things

Usage

  
    import React, { Component } from 'react';
    import { toast } from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {
              toast('Created successfully!', {
                status: 'Thanks!',
                type: 'success',
                autoHide: false,
                delay: '7000'
              })
            }
        )
      }
    }
  

The latest release introduces you with more ease and flexibility.

Success

  
    import React, { Component } from 'react';
    import toast from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {toast.success('Created successfully')}
        )
      }
    }
    
    You can directly call 'success', 'error', 'warn' or 'info' function too. For example,
    
    import React, { Component } from 'react';
    import { success } from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {success('Created successfully')}
        )
      }
    }
  

Error

  
    import React, { Component } from 'react';
    import toast from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {toast.error('Something went wrong.')}
        )
      }
    }
  

Warning

  
    import React, { Component } from 'react';
    import toast from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {toast.warn('Note, this is deprecated.')}
        )
      }
    }
  

Information

  
    import React, { Component } from 'react';
    import toast from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {toast.info('Your system is upto date.')}
        )
      }
    }
  

Options

• status : 'Success!'

Any title you want to show on notification. e.g. "Thanks!"

• type : 'success'

Type of notification. It can be 'default', 'success', 'error', 'warn' or 'info'.

• delay : '7000'

Time to show toast in milliseconds. Default is 5000 ms.

• autoHide : 'true'

Boolean value. It can be true or false.

Contribute

Any suggestions or pull requests are welcomed!

License

Licensed under MIT