# react-toast-notification
Toast notification based on Bootstrap design.

<h2>Introduction</h2>
<p>'react-toast-notification' allows you to put notification easily on your web apps.</p>

<h2>Installation</h2>

<pre>
    npm install react-toast-notification
</pre>

<h2>Features</h2>
  <ul>
    <li>Easy to use</li>
    <li>Single line import and you're ready to go</li>
    <li>Avoids extra inclusion or headache to include more things</li>
  </ul>
  
<h2>Usage</h2>
<pre>
  <code>
    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'
              })
            }
        )
      }
    }
  </code>
</pre>

<h3>The latest release introduces you with more ease and flexibility.</h3>
<h3>Success</h3>
<pre>
  <code>
    import React, { Component } from 'react';
    import toast from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {toast.success('Created successfully')}
        )
      }
    }
    <code>
    You can directly call 'success', 'error', 'warn' or 'info' function too. For example,
    </code>
    import React, { Component } from 'react';
    import { success } from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {success('Created successfully')}
        )
      }
    }
  </code>
</pre>

<h3>Error</h3>
<pre>
  <code>
    import React, { Component } from 'react';
    import toast from 'react-toast-notification';
    export default class App extends Component {
      render() {
        return (
            {toast.error('Something went wrong.')}
        )
      }
    }
  </code>
</pre>

<h3>Warning</h3>
<pre>
  <code>
    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.')}
        )
      }
    }
  </code>
</pre>

<h3>Information</h3>
<pre>
  <code>
    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.')}
        )
      }
    }
  </code>
</pre>

<h2>Options</h2>
  <ul>
    <li><code> status : 'Success!' </code></li>
    Any title you want to show on notification. e.g. "Thanks!"
    <li><code> type : 'success' </code></li>
    Type of notification. It can be 'default', 'success', 'error', 'warn' or 'info'.
    <li><code> delay : '7000' </code></li>
    Time to show toast in milliseconds. Default is 5000 ms.
    <li><code> autoHide : 'true' </code></li>
    Boolean value. It can be true or false.
  </ul>

<h2>Contribute</h2>
<p>Any suggestions or pull requests are welcomed! </p>

<h2>License</h2>
<p>Licensed under MIT</p>