react toast实际应用

一、react-toast-notifications（样式好看，但是比较难放到自己的实例中）

• API可以查看链接：https://github.com/jossmac/react-toast-notifications
• 效果图

• 代码

import React, { Component } from "react";
import { ToastProvider, useToasts } from "react-toast-notifications"
function FormWithToasts() {
  const { addToast } = useToasts()
  const onSubmit = (content) => {
      addToast(content, { appearance: 'error',autoDismiss: true,
     })
  }
  return (
     onSubmit("Click to dismiss!")}>Add toast
  )
}
class App extends Component {
  render() {
    return (
      

          
            
React Toast Notifications
            

              
            
          
        
    );
  }
}
export default App;

二、样式普通，但是比较容易应用（个人倾向于这一种，第一种方案目前没实现，不知道怎么放到自己的项目中）

• API:https://github.com/fkhadra/react-toastify

import React, { Component } from "react";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
class ReportSite extends Component {
  notify = () => {
    toast("Default Notification !");

    toast.success("Success Notification !", {
      position: toast.POSITION.TOP_CENTER
    });

    toast.error("Error Notification !", {
      position: toast.POSITION.TOP_LEFT
    });

    toast.warn("Warning Notification !", {
      position: toast.POSITION.BOTTOM_LEFT
    });

    toast.info("Info Notification !", {
      position: toast.POSITION.BOTTOM_CENTER
    });

    toast("Custom Style Notification with css class!", {
      position: toast.POSITION.BOTTOM_RIGHT,
      className: 'foo-bar'
    });
  };
  render() {
    return (
      

        Notify !
        
      
    );
  }
}
export default  ReportSite;