Custom Toast Notification Package

Overview

The toast-package provides custom toast notifications for React applications, similar to notistack. It allows you to display notifications in a user-friendly manner.

Demo

View Demo

CodeSandbox

Open in CodeSandbox

Installation

To install the package, you can use either npm or yarn:

1npm install done-pop
2
3or
4
5yarn add done-pop

Usage

To use the package in your React application, follow these steps:

1. Import the useToast function from 'done-pop'.
2. Create a toast instance using useToast().
3. Call the toast instance to display a notification.

Here's an example:

1import { useToast } from "done-pop";
2
3const MyComponent = () => {
4  const { Toast } = useToaster();
5
6  return (
7    <div>
8      <button
9        onClick={() =>
10          Toast("This is a success message!", { variant: "success" })
11        }
12      >
13        Show Success Toast
14      </button>
15    </div>
16  );
17};

Wrapping the App

To use the ToasterProvider and wrap your app, you can include the following code:

1import { StrictMode } from "react";
2import { createRoot } from "react-dom/client";
3import { ToasterProvider } from "done-pop";
4import App from "./App.tsx";
5import "./index.css";
6
7createRoot(document.getElementById("root")!).render(
8  <StrictMode>
9    <ToasterProvider
10      dense
11      preventDuplicate
12      maxSnack={3}
13      autoHideDuration={1800}
14      anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
15    >
16      <App />
17    </ToasterProvider>
18  </StrictMode>
19);
20

API

useToast()

The useToast function returns a function that can be used to display a toast notification.

Example:

1const toast = useToast();
2toast("This is a notification!");

Files

• dist/index.cjs.js: CommonJS module entry point.
• dist/index.esm.js: ES module entry point.
• dist/index.d.ts: TypeScript type definitions.

Keywords

• toast
• notification
• react
• snackbar
• Snackify

Author

Zubair Rahman

License

Please specify the license under which the package is distributed.

Contributing

If you would like to contribute to this package, please fork the repository and submit a pull request.

Issues

If you encounter any issues, please report them on the GitHub repository.

Feel free to expand this documentation with more details specific to your package's functionality and usage.