Skip to main content

Installation

Requirements​

  • React version >= 16 or above

Installation​

With yarn​

yarn add react-ghosta

With NPM​

npm install react-ghosta

Usage​

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!

Live Editor
// uncomment these lines after paste them to your code editor
// import { GhostaContainer, ghosta } from "react-ghosta"
// import "react-ghosta/dist/ghosta.css"

function App() {
  const handleShowAlert = () => {
    // Ghosta emitter
    ghosta.fire({
      title: "Tada! 🎉",
      description: "Easy to use and customize",
    });
  };

  return (
    <div>
      <Button onClick={handleShowAlert} showGradientBorder={true}>
        Click to Show Alert
      </Button>

      {/* Ghosta Container */}
      <GhostaContainer />
    </div>
  );
}
Result
Loading...

ghosta has fire, close methods. The fire method accepts a rich object to display an ideal popup alert for various use cases. We will check them with examples on next pages.