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 { GhostaContainer, 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>
      <GhostaContainer />
    </div>
  );
};

Documentation

Find the full API reference on official documentation.

TODO

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

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