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

| Option | Type | Default | Description | |--------------------|-----------------------------------------------|------------|---------------------------------------| | type | "success" | "error" | "warning" | "default" | "default" | Toast style | | variant | "regular" | "outlined" | "contained" | "regular" | Visual variant | | duration | number | 5 | Duration in seconds | | spacing | "small" | "regular" | "large" | "regular | Message Padding | | disableAnimation | boolean | false | Disable entry/exit animations | | elevation | number | 3 | Box Shadow on Toast Container | | showProgress | boolean | true | Show progress bar | | slideFrom | "left"|"right"|"bottom"|"top" | "right" | Slide-from direction (slides back into that direction) | | position | "top left"|"top right"|"top center"|"bottom left" | "bottom right"|"bottom center" | Position on Screen | | showProgress | boolean | true | Show progress bar | | showIcon | boolean | true | Show Icon (type: "default" has no icon) | | fontSize | string | number | 14 | Font size for message text | | iconSize | number | 17 | Icon size | | sx | React.CSSProperties | {} | Inline style overrides |

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>