sure-alert

sure-alert is a custom React hook for displaying alerts in your React applications. It provides a simple interface to show and hide alerts with ease.

Table of Contents

• Installation
• Usage
• API
• Contributing
• License

Installation

To use sure-alert in your project, you need to have React and React-DOM installed. You can add sure-alert to your project via npm:

npm install sure-alert

Provide in index.js or App.js Context

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AlertProvider } from "./context/AlertContext";

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <AlertProvider>
        <App />
      </AlertProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

Use Hooks

const deleteItem = async (id) => {
  try {
    const confirmed = await showAlert({
      title: "Delete Confirmation",
      message: "Are you sure you want to delete this item?",
      positiveLabel: "Delete",
      negativeLabel: "Cancel",
      positiveStyle: {
        backgroundColor: "red",
        color: "white",
      },
    });

    if (confirmed) {
      await linkService.deleteLinkById(id);
      toast.info("QR Deleted Successful");
      queryClient.invalidateQueries({ queryKey: ["getQR"] });
    }
  } catch (error) {
    toast.error("Something went wrong");
  }
};