React Glass Toast

A glassmorphic toast notification component for React, using plain CSS.
Supports multiple positions, types, auto-dismiss, and a progress bar.

Features

• Glassmorphic design with blur effect
• Customizable toast types: success, warning, error
• Customizable positions: top-left, top-right, bottom-left, bottom-right, center
• Auto-dismiss with configurable duration
• Optional onClose callback
• Progress bar indicating remaining duration
• No external dependencies for styling

Installation

npm install react-glass-toast
# or
yarn add react-glass-toast


import { useState } from "react";
import { Toast } from "react-glass-toast";
import "react-glass-toast/dist/index.css"; // Import CSS

function App() {
  const [show, setShow] = useState(true);

  return (
    <>
      {show && (
        <Toast
          message="Hello World!"
          duration={3000}
          position="top-right"
          type="success"
          onClose={() => setShow(false)}
        />
      )}
    </>
  );
}

export default App;


Prop	Type	Default	Description

message	string	—	The text to display in the toast

type	"success" | "warning" | "error"	"success"	The type of toast, controls color

duration	number	3000	Auto-dismiss time in milliseconds

position	"top-left" | "top-right" | "bottom-left" | "bottom-right" | "center"	"top-right"	Position of the toast on the screen

onClose	() => void	—	Callback triggered when toast closes


## Example

import { useState } from "react";
import { Toast } from "react-glass-toast";
import "react-glass-toast/dist/index.css"; // Import CSS

function App() {
  const [show, setShow] = useState(true);

  return (
    <>
      {show && (
        <Toast
          message="Hello World!"
          duration={3000}
          position="top-right"
          type="success"
          onClose={() => setShow(false)}
        />
      )}
    </>
  );
}

export default App;