react-floatify

A lightweight, customizable toast notification library for React.

Built for React using React, TypeScript, Framer Motion for animation and SCSS for styling.

Test it out in this custom playground built for react-floatify : https://toasty-playground-ten.vercel.app/

Features

• Multiple toast types: success, error, warning, default
• Variants: regular, outlined, contained
• Adjustable spacing, shadows, position and pop-in-out directions
• Configurable duration + optional progress bar
• Option to disable animations
• Customizable fontSize and iconSize
• Override styles using sx
• Tiny, tree-shakable, easy to use

Installation

npm install react-floatify

Usage

Wrap your app with the ToastProvider:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ToastProvider } from "react-floatify";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ToastProvider>
      <App />
    </ToastProvider>
  </React.StrictMode>
);

Import CSS and Trigger a toast with the useToast hook:

import { useToast } from "react-floatify";
import "react-floatify/dist/react-floatify.css";

function Example() {
  const { addToast } = useToast();

  return (
    <button
      onClick={() =>
        addToast("Hello World!", {
          type: "success",
          variant: "contained",
          spacing:"regular",
          duration: 4,
          fontSize: 16,
          iconSize: 20,
          showProgress: true,
        })
      }
    >
      Show Toast
    </button>
  );
}

TypeScript Usage

If you’re using TypeScript and your type or variant values come from component state, you should import the provided types to get full type safety:

import { useToast, type ToastType, type ToastVariant } from "react-floatify";

const [type, setType] = useState<ToastType>("default");
const [variant, setVariant] = useState<ToastVariant>("regular");

Options

position prop must be used in ToastProvider

Example usage:

<ToastProvider position="bottom center">...</ToastProvider>

DOM Structure

Each toast is rendered inside a .Toast-stack-modal.
The basic DOM structure looks like this for a toast with type:"success", variant:"regular", iconSize:17, spacing:"regular" and showProgress:true:

<div class="Toast-stack-modal">
  <div class="Toasty-container success regular">
    <div class="Toasty-message regular-spacing">
      <CheckCircle size={17}/> // lucide-react icon
      Welcome to Floatify
    </div>
    <div class="Toasty-progress-container">
      <div class="Toasty-progress-bar success"></div>
    </div>
  </div>
</div>