Toastam NPM | npm.io

Toastam

Toastam is a lightweight, customizable toast library for React applications. It offers an intuitive API for triggering toast messages with flexible styling and positioning options.

Features

Lightweight and easy to integrate
Customizable toast messages
Multiple style variants
Flexible positioning
Adjustable duration
TypeScript support

Installation

Install Toastam using npm:

npm install toastam

Quick Start

Import the necessary components:

import { Toaster, toast } from "toastam";

Add the Toaster component to your app's root:

function App() {
  return (
    <div className="App">
      {/* Your app components */}
      <Toaster />
    </div>
  );
}

Trigger toast messages anywhere in your application:

toast.success("Operation completed successfully!");

API Reference

Toaster Component

Prop	Type	Default	Description
`styleVariant`	`'normal' \\| 'sharp'`	`'normal'`	Visual style of toast messages
`duration`	`number`	`3000`	Display duration (ms)
`position`	`'top-left' \\| 'top-center' \\| 'top-right' \\| 'bottom-left' \\| 'bottom-center' \\| 'bottom-right'`	`'top-right'`	Toast container position

Toast Functions

toast.success(message: string)
toast.error(message: string)
toast.warning(message: string)
toast.info(message: string)

Examples

toast.success("Profile updated successfully!");
toast.error("An error occurred. Please try again.");
toast.warning("Your session is about to expire.");
toast.info("New app version available.");