Untoastify is a lightweight, customizable, and efficient alternative to react-toastify
for toast notifications in React applications. It's simple to use, with minimal styling, but offers flexibility for easy customization.
To install untoastify, run the following npm command:
npm install untoastify
// in your root layout.js
import { ToastProvider } from "untoastify"; // then wrap your app component inside the toast provider < ToastProvider > < App /> // your app main component < /ToastProvider >
import { useToast } from "untoastify"; const MyComponent = () => { const toast = useToast(); const handleClick = () => { toast.showToast({ message: "Show information toast!", type: "info", position: "top-right", duration: 3000, }); }; return ( < button > onClick={handleClick}> Toast Me < /button > ); }; export default MyComponent;
message (required. will show a dummy message if not provided): The message content to display.
type (optional): the type of the message. (values: error, info, success, warning).
position (optional. default to top-right): Toast position on screen (values: top-left, top-right, bottom-left, bottom-right).
duration: the duration the toast should display in miliseconds (ms). Default to 4000 ms.
git clone https://github.com/clouds440/untoastify.git
cd untoastify
MIT license - see the LICENSE file for details.