Reactjs-Toaster

The React JS Toaster (reactjs-toaster) is lightweight JavaScript/TypeScript based Toast message library for showing Error , Success , Warning and Info message in UI End.

Installation

Use the package manager npm to install reactjs-toaster.

npm i reactjs-toaster

NOTE => Make sure in your Project configure with tailwind css! .

Implementation Witn Global Configuration

Make ToastIntitializer Component (ToastIntitializer.tsx/jsx ) (Step => 1)

import { useEffect } from "react"
import { setGlobalAddToast, useToastHook } from "reactjs-toaster"

export const ToastIntitializer=()=>{
     const {addToast} = useToastHook()
     useEffect(()=>{
        setGlobalAddToast(addToast)
    }
    ,[addToast])

    return null
}

Main.tsx/jsx File Global Configuration (Provider) (Step => 2)

1. Import ToastInitilizer.tsx/jsx and Wrap in Provider component.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

//toaster provider import here
import { ToastProvider } from 'reactjs-toaster'
import { ToastIntitializer } from './ToastInitializer.jsx'

createRoot(document.getElementById('root')).render(
<StrictMode>
    <ToastProvider>
        <App />

       <ToastIntitializer/>
    </ToastProvider>
</StrictMode>)

Uses

1. Import (toast) use any where in the your ReactJs Project.

Example :-

import { toast } from "reactjs-toaster"

export const Test=()=>{

const handleToastError=()=> toast("success","Data Submitted!",5000);

return (<>
     <button onClick={handleToastError} > Toast Appear </button>
</>)

Full Documentation, How to use Reactjs Toaster (Coming soon...)

For the more information , How to use reactjs-toaster Tap to go my Linkdin Account and Watch the Video .

Hi, I'm PankajKumar! 👋

🚀 About Me

👋 Hello! I am a passionate Full Stack Developer with nearly 2 years of hands-on experience in building dynamic and responsive web applications. My expertise spans a diverse range of technologies, including:

• Frontend Development:

  Proficient in React.js, where I create intuitive user interfaces and seamless user experiences. I leverage modern JavaScript features and state management libraries to build scalable applications.

• Backend Development:

  Skilled in Node.js and Express.js, I design and implement robust server-side applications and RESTful APIs. My experience with Nest.js allows me to build efficient and maintainable server-side applications using TypeScript.

• Database Management:

  I have a solid understanding of both MongoDB and MySQL, enabling me to design and manage databases that support complex data structures and relationships. I am adept at writing optimized queries and ensuring data integrity.

• Full Stack Integration:

  I excel at integrating frontend and backend technologies, ensuring smooth data flow and functionality across the entire application stack. My experience with Next.js allows me to build server-rendered React applications, enhancing performance.

I am committed to writing clean, maintainable code and following best practices in software development. I thrive in collaborative environments and enjoy working with cross-functional teams to deliver high-quality software solutions.

I am always eager to learn new technologies and improve my skills, and I am excited about the opportunity to contribute to innovative projects that make a difference.

🛠 Skills

Javascript, HTML, CSS, React JS , Node JS , Express JS, Nest JS , Next JS, MongoDB, MySQL , Git , Jira , PHP with Laravel etc.

Authors

@PankajKumar

🔗 Social Links

License

ISC