1.0.12 • Published 10 months ago

reactjs-toaster v1.0.12

Weekly downloads
-
License
ISC
Repository
github
Last release
10 months ago

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.

MIT License

GPLv3 License

AGPL License

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

portfolio

linkedin

License

ISC

1.0.12

10 months ago

1.0.11

10 months ago

1.0.10

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago