react toastify code example

Example 1: react toastify does not have design

import React, { Component } from 'react';
  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  // minified version is also included
  // import 'react-toastify/dist/ReactToastify.min.css';

  class App extends Component {
    notify = () => toast("Wow so easy !");

    render(){
      return (
        <div>
        <button onClick={this.notify}>Notify !</button>
          <ToastContainer />
        </div>
      );
    }
  }

Example 2: react toastify

import React from 'react';

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App(){
  const notify = () => toast("Wow so easy!");

  return (
    <div>
    <button onClick={notify}>Notify!</button>
<ToastContainer />
    </div>
);
}

Example 3: react toast

import { ToastProvider } from 'react-toast-notifications';
import { Snack } from '../snackbar';

const App = () => (
  <ToastProvider
    autoDismiss
    autoDismissTimeout={6000}
    components={{ Toast: Snack }}
    placement="bottom-center"
	appearance: 'success',
    autoDismiss: true,
  >
    ...
  </ToastProvider>
);

Example 4: react toastify

yarn add react-toastify

Example 5: react toastr

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">