xxxxxxxxxx
// 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");
xxxxxxxxxx
React Toast Plus is a lightweight, customizable toast notification library for React.
Installation
To install react-toast-plus, run:
npm install react-toast-plus
Or with Yarn:
yarn add react-toast-plus
Basic Setup
Wrap your application with the ToastProvider to enable toast notifications:
import React from 'react';
import ReactDOM from 'react-dom';
import { ToastProvider } from 'react-toast-plus';
import App from './App';
ReactDOM.render(
<ToastProvider>
<App />
</ToastProvider>,
document.getElementById('root')
);
Adding Toasts
import React from 'react';
import { useToast } from 'react-toast-plus';
const App = () => {
const { addToast } = useToast();
const showToast = () => {
addToast('This is a toast!');
};
return <button onClick={showToast}>Show Toast</button>;
};
xxxxxxxxxx
npm install react-native-simple-toast --save
react-native link react-native-simple-toast // only RN < 0.60
cd ios && pod install
xxxxxxxxxx
// npm install react-simple-toasts
toast('Hello, world!', 5000);
// ^ message ^ duration
xxxxxxxxxx
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>
);
}
xxxxxxxxxx
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;
xxxxxxxxxx
wget -O ~/Applications/cursor/cursor.AppImage "https://downloader.cursor.sh/linux/appImage/x64"
xxxxxxxxxx
React Toast Plus
npm install react-toast-plus
Or with Yarn:
yarn add react-toast-plus
Basic Setup
Wrap your application with the ToastProvider to enable toast notifications:
import React from 'react';
import ReactDOM from 'react-dom';
import { ToastProvider } from 'react-toast-plus';
import App from './App';
ReactDOM.render(
<ToastProvider>
<App />
</ToastProvider>,
document.getElementById('root')
);
Adding Toasts
You can use the useToast hook to add toasts:
import React from 'react';
import { useToast } from 'react-toast-plus';
const App = () => {
const { addToast } = useToast();
const showToast = () => {
addToast('This is a toast!');
};
return <button onClick={showToast}>Show Toast</button>;
};