n-tostify

A beautiful, customizable toast notification library for React with TypeScript support. Built with Framer Motion for smooth animations and Tailwind CSS for styling.

Features

• Beautiful, modern UI with smooth animations
• Fully responsive and accessible
• Multiple toast types: success, error, warning, info
• Customizable positioning (6 positions available)
• Auto-dismiss with customizable duration
• TypeScript support out of the box
• Built with Framer Motion for fluid animations
• Tailwind CSS for easy customization

Installation

npm install n-tostify
# or
yarn add n-tostify
# or
pnpm add n-tostify

Peer Dependencies

Make sure you have these dependencies installed in your project:

npm install react react-dom framer-motion lucide-react clsx tailwind-merge

Setup

1. Configure Tailwind CSS

Since this library uses Tailwind CSS, you need to have Tailwind configured in your project. If you don't have it set up:

1. Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Add the library styles to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/n-tostify/**/*.{js,ts,jsx,tsx}", // Add this line
  ],
  // ... rest of your config
};

3. Import Tailwind in your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Wrap your app with ToastProvider

import { ToastProvider } from "n-tostify";

function App() {
  return (
    <ToastProvider position="top-right">{/* Your app content */}</ToastProvider>
  );
}

Usage

Using the Hook

import { useToast } from "n-tostify";

function MyComponent() {
  const { toast, success, error, warning, info } = useToast();

  const handleClick = () => {
    success("Operation completed successfully!");
    // or
    error("Something went wrong!");
    // or
    warning("Please check your input");
    // or
    info("Here is some information");
    // or
    toast("Custom message", "success", 5000);
  };

  return <button onClick={handleClick}>Show Toast</button>;
}

Using the Global Toast Function

You can also use the toast function from anywhere in your codebase:

import { toast } from "n-tostify";

// In any function or component
toast.success("Success message");
toast.error("Error message");
toast.warning("Warning message");
toast.info("Info message");
toast.show("Custom message", "success", 5000);

API Reference

ToastProvider Props

| Prop | Type | Default | Description | | ---------- | ----------------- | ------------- | ------------------------------- | | children | React.ReactNode | Required | Your app content | | position | ToastPosition | "top-right" | Position of toast notifications |

ToastPosition

type ToastPosition =
  | "top-right"
  | "top-left"
  | "top-center"
  | "bottom-right"
  | "bottom-left"
  | "bottom-center";

useToast Hook

Returns an object with the following methods:

• toast(message: string, type?: ToastType, duration?: number) - Show a toast with custom type
• success(message: string, duration?: number) - Show a success toast
• error(message: string, duration?: number) - Show an error toast
• warning(message: string, duration?: number) - Show a warning toast
• info(message: string, duration?: number) - Show an info toast

Toast Types

type ToastType = "success" | "error" | "warning" | "info";

Duration

The duration parameter is optional and specified in milliseconds. Default is 4000ms (4 seconds).

Examples

Basic Example

import { ToastProvider, useToast } from "n-tostify";

function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  );
}

function MyComponent() {
  const { success } = useToast();

  return <button onClick={() => success("Hello, World!")}>Show Toast</button>;
}

Custom Position

<ToastProvider position="bottom-center">
  <App />
</ToastProvider>

Custom Duration

const { error } = useToast();

// Show error for 10 seconds
error("This error will show for 10 seconds", 10000);

Using Global Toast

import { toast } from "n-tostify";

async function handleSubmit() {
  try {
    await submitForm();
    toast.success("Form submitted successfully!");
  } catch (err) {
    toast.error("Failed to submit form");
  }
}

Styling

The library uses Tailwind CSS classes. You can customize the appearance by:

1. Overriding Tailwind classes in your own CSS
2. Using Tailwind's configuration to customize colors
3. Modifying the component styles directly (if you fork the library)

TypeScript

Full TypeScript support is included. All types are exported:

import type { Toast, ToastType, ToastPosition } from "n-tostify";

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.