Copy Generated code

          
            const toaster = new Toaster.toaster();
            
            toatsManager.addToast('This is a Normal Toast.' , "default", {
                autoClose: true,
                duration: 3000,
                styles: {},
                onClose: ()=>{console.log("Toast closed!");}
            });
          
        

Installation

To use Toaster-Ui, you have two options for installation:

Option 1: Script Tag

Include the following script tag in your HTML file:

<script src="https://unpkg.com/toaster-ui@1.1.5/dist/main.js"></script>

or

<script src="https://cdn.jsdelivr.net/npm/toaster-ui@1.1.5/dist/main.js"></script>

Option 2: NPM

Install Toaster-Ui using npm:

npm i toaster-ui

Usage

Once Toaster-Ui is installed in your project, you can start using it by following the instructions below.

If you imported the library using a module bundler like webpack or Rollup:

import ToasterUi from 'toaster-ui';

If you included the library using a script tag, there's no need to import it explicitly.

Create a new instance of ToasterUi:

const toaster = new ToasterUi();

Basic Usage

To display a basic toast message, use the addToast() method:

toaster.addToast("This is a toast");

The addToast() method takes three parameters:

• content (required): The message content of the toast.
• type (optional): The type of the toast. It can be one of the following: default, success, error, warning, info, loading. Default is default.
• options (optional): Additional options to customize the toast. See the Options section for more details.

Options

The addToast() method's third parameter, options, allows you to customize various aspects of the toast. The available options are:

Updating a Toast

To update a toast message after it has been displayed, you can use the updateToast() method. This method requires the id of the toast that needs to be updated, which is returned when adding a toast.

Here's an example of how to update a toast:

const toastId = toaster.addToast("Initial toast content");

// To update the toast
toaster.updateToast(toastId, "New toast content", "success", { duration: 5000 });

The updateToast() method takes four parameters:

• id (required): The ID of the toast to be updated.
• newContent (optional): The new message content of the toast.
• newType (optional): The new type of the toast.
• newOptions (optional): New options to customize the toast. Only the specified options will be updated, and the rest will remain unchanged.

Manual Update for Loading Toasts

When the type of the toast is "loading", the autoClose option is automatically set to false. This means that the toast will not close automatically after a duration. Instead, you'll need to update the toast manually using the updateToast() function to indicate when the loading is complete or any other desired changes.

Here's an example of how to create a loading toast and manually update it:

const toastId = toaster.addToast("Loading in progress", "loading");

// Simulate loading completion after 3 seconds
setTimeout(() => {
  toaster.updateToast(toastId, "Loading complete!", "success", { autoClose: true });
}, 3000);

In this example, we first create a loading toast by setting the type to "loading". Since the autoClose option is set to false, the toast will remain visible until we manually update it. After a simulated loading process of 3 seconds, we use the updateToast() function to change the toast's content, type to "success", and enable autoClose by setting it to true. This causes the toast to automatically close after the specified duration.

Remember, for loading toasts, you need to manually update the toast using updateToast() to reflect changes or indicate completion.

const toastId = toaster.addToast("Initial toast", "default", { duration: 3000 });

// Update the toast without modifying the type or options
toaster.updateToast(toastId, "Updated toast");

// The toast will still have the "default" type and a duration of 3000

const toastId = toaster.addToast("Initial toast", "default", { duration: 3000 });

// Update the toast and change its type
toaster.updateToast(toastId, "Updated toast", "success");

// The toast will now have the "success" type and a duration of 3000

const toastId = toaster.addToast("Initial toast", "default", { duration: 3000, styles: { color: "blue" } });

// Update the toast and change only the styles
toaster.updateToast(toastId, "Updated toast", null, { styles: { color: "red" } });

// The toast will retain its type, duration, and the updated styles { color: "red" }

That's it! You now have That's it! You now have a basic understanding of how to use Toaster-Ui in your web application. Below, you'll find some additional examples and usage details to further enhance your experience with the library.

Creating Custom Types

To create a custom toast type, you can define your own CSS class and apply it to the toast element. Here's an example:

.toaster-ui-lib-custom {
  background-color: #ff00ff; /* Replace with your desired background color */
  /* Add any other custom styles here */
}

You can apply the custom type to a toast by setting the type parameter to your custom type name:

toaster.addToast("Custom toast message", "custom");

The toast will now have the custom type styling applied to it.

Examples

Example 1: Customizing Toast Styles

You can customize the styles of a toast by providing a styles object in the options parameter. Here's an example:

const options = {
  duration: 2000,
  styles: {
    backgroundColor: '#ff0000',
    color: '#ffffff',
    border: '1px solid #ffffff',
  },
};

toaster.addToast("Customized toast", "success", options);

Example 2: Allowing HTML Content

To display HTML content in a toast message, set the allowHtml option to true. Here's an example:

const options = {
  allowHtml: true,
};

toaster.addToast("<strong>This is a bold toast message</strong>", "info", options);

Example 3: Handling Toast Closure

You can specify a callback function to be executed when a toast is closed by providing the onClose option. Here's an example:

const options = {
  onClose: () => {
    console.log("Toast closed!");
  },
};

toaster.addToast("Toast with closure callback", "default", options);

Example 4: Updating toast

example of fetching data from an application using Toaster-Ui:

const toaster = new ToasterUi();

// Create a function to fetch some data from the application
async function dataFetch() {
  // Add a toast of type loading
  const toastId = toaster.addToast("Loading, please wait", "loading");

  const data = await fetch("https://jsonplaceholder.typicode.com/todos/1");

  const promise = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Promise resolved.");
    }, 2000);
  });

  if (data.status !== 200) {
    // Update the toast with error message
    toaster.updateToast(toastId, "Error while fetching data", "error");
    return;
  } else {
    // Update the toast with success message
    toaster.updateToast(toastId, "Data fetched successfully", "success");
  }

  setTimeout(() => {
    toaster.updateToast(toastId, "Promise resolved", "success", {
      autoClose: true,
    });
  }, 2000);

  const json = await data.json();
  return json;
}

dataFetch();

In this example, the dataFetch function is created to fetch data from an application. It starts by adding a toast of type "loading" using toaster.addToast and assigns the returned toastId to a variable.

Next, it makes an asynchronous fetch request to retrieve data from the specified URL. It also simulates a promise being resolved after a 2-second delay using setTimeout.

If the data response has a status other than 200, indicating an error, the toast is updated with an error message using toaster.updateToast. Otherwise, if the data is successfully fetched, the toast is updated with a success message.

After 2 seconds, another toast update is triggered to display the message "Promise resolved" with a success type, and the autoClose option set to true to automatically close the toast.

Finally, the fetched data is converted to JSON using data.json() and returned.

When you run the dataFetch function, the toast messages will be displayed in the Toaster-Ui component based on the progress and status of the data fetching process.

.toaster-ui-lib-container{
  max-width: 500px;
  left:0;
}
          

          
            .toaster-ui-lib {
              /* custom styles for the toast element */
              /* Add your custom styles here */
            }
            .toaster-ui-lib::after {
              /* Add your custom styles here */
            }
            .toaster-ui-lib-close{
              /* Add your custom styles here */
            }
            .toaster-ui-lib-loader{
              /* Add your custom styles here */
            }
          
        

Summary

Congratulations! You've successfully learned how to install, import, and use Toaster-Ui in your web application. You're now equipped with the knowledge to display toast messages with custom styles, handle toast closure, and take advantage of advanced features offered by the library. Explore and experiment with the different options and methods to enhance your user interface with informative and visually appealing toast messages. Happy coding!