react-ghosta

Popup Alerts for React.

Lightweight, customizable and beautiful by default.

Documentation · Website

Features

• 🔩 Easily Customizable
• ⚛️ Reach Features
• 🕊 Lightweight
• ✅ Accessible

Installation

With yarn

yarn add react-ghosta

With NPM

npm install react-ghosta

Getting Started

Add the Ghosta and ghosta.css to your app first. It will take care of rendering all alerts emitted. Now you can trigger ghosta.fire() from anywhere!

import { Ghosta, ghosta } from 'react-ghosta';
import "react-ghosta/dist/ghosta.css";

const handleShowAlert = () => ghosta.fire({ title: 'Here is your alert.' });

const App = () => {
  return (
    <div>
      <button onClick={handleShowAlert}>Show me an Alert</button>
      <Ghosta />
    </div>
  );
};

Documentation

Find the full API reference on official documentation.

TODO

1. ⬜️ Add variant option and bind icon and icon background color to this option

2. ⬜️ Add timer option to close the popup after some time and add showTimerProgressBar option to show progress of timer.