import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Button } from 'devextreme-react/button'; import notify from 'devextreme/ui/notify'; const types = ['error', 'info', 'success', 'warning']; const showMessage = () => { notify( { message: "You have a new message", width: 230, position: { at: "bottom", my: "bottom", of: "#container" } }, types[Math.floor(Math.random() * 4)], 500 ); } function App() { return ( <div id="container"> <div id="buttons"> <Button text="Show message" onClick={showMessage} > </Button> </div> </div> ); } export default App;// toast in react // create toast.js component import { toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; toast.configure() const options = { autoClose: 2000, className: '', position: toast.POSITION.TOP_RIGHT, }; export const toastSuccess = message => { console.log("Hello0 success toast") toast.success(message, options); } export const toastError = message => { toast.error(message, options); } export const toastWarning = message => { toast.warn(message, options); } export const toastInformation = message => { toast.info(message, options); } export const toastDark = message => { toast.dark(message, options); } export const toastDefault = message => { toast(message, options); } // wherever in need that toast use like this import { toastError, toastSuccess } from "./Toast"; toastSuccess("User successfully registered"); toastError("User is not created try again"); import React from 'react'; import { ToastContainer, toast } from 'material-react-toastify'; import 'material-react-toastify/dist/ReactToastify.css'; function App(){ const notify = () => toast("Wow so easy !"); return ( <div> <button onClick={notify}>Notify !</button> <ToastContainer /> </div> ); }<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">