Hudoro toast

Hudoro toast is a strict and customizable toast component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/toast

Instal package using yarn

  yarn add @hudoro/toast

Instal package using npm

  npm i @hudoro/toast

Usage/Examples

import React from "react";
import {ToastContainer, toast} from "@hudoro/toast";
import ReactDOM from "react-dom/client";

const App = () => {
  const handleAddToastSuccess = () => {
    toast.success("New Feature Available success");
  };
  const handleAddToastDefault = () => {
    toast.default("New Feature Available default");
  };
  const handleAddToastInfo = () => {
    toast.info("New Feature Available info");
  };
  const handleAddToastDanger = () => {
    toast.danger("New Feature Available danger");
  };
  return (
    <div>
      <button onClick={handleAddToastSuccess}>success</button>
      <button onClick={handleAddToastDefault}>default</button>
      <button onClick={handleAddToastInfo}>info</button>
      <button onClick={handleAddToastDanger}>danger</button>
      <ToastContainer type="outline" direction="bottom-right" />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props

Props that you can pass to <ToastContainer {...props} />

| Prop Name | Value | required | | :-------- | :-------------------------------------------------------- | :------- | | type | "solid" / "outline" | false | | direction | "bottom-right" / "bottom-left" / "top-right" / "top-left" | false |