Skip to content

clouds440/untoastify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Untoastify

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.


🚀 Installation

To install untoastify, run the following npm command:

npm install untoastify

Toast Provider set up

// in your root layout.js

import { ToastProvider } from "untoastify";

// Then wrap your App component inside the toast provider

< ToastProvider >
< App /> // your App component
< /ToastProvider >

Basic usage

 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;

Props

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.

Development/modification and contribution

git clone https://github.com/clouds440/untoastify.git

cd untoastify

📦 License

MIT License - see the LICENSE file for details.

About

A lighter but better alternative to react-toastify. Customizable, efficient, and easy-to-use.

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages