More Premium Hugo Themes Premium React Themes

Material UI Confirm

Simple confirmation dialogs built on top of @mui/material and straightforward to use thanks to React Hooks

Material UI Confirm

Simple confirmation dialogs built on top of @mui/material and straightforward to use thanks to React Hooks

Author Avatar Theme by jonatanklosko
Github Stars Github Stars: 368
Last Commit Last Commit: Feb 5, 2025 -
First Commit Created: Jan 15, 2024 -
Material UI Confirm screenshot

Overview

Material-UI Confirm is a package that provides simple confirmation dialogs built on top of @mui/material and is easy to use thanks to React Hooks. It allows users to easily confirm their choices in a user-friendly manner.

Features

  • Built on top of @mui/material
  • Utilizes React Hooks for easy implementation
  • Provides simple confirmation dialogs
  • Allows customization of default dialog options
  • Returns a promise representing the user’s choice

Installation

To install Material-UI Confirm, follow these steps:

  1. Install the package using npm:
npm install @material-ui/confirm
  1. Import the ConfirmProvider component in your app:
import { ConfirmProvider } from "@material-ui/confirm";
  1. Wrap your app inside the ConfirmProvider component:
<ConfirmProvider>
  // Your app components
</ConfirmProvider>
  1. Call the useConfirm hook wherever you need the confirm function:
import { useConfirm } from "@material-ui/confirm";

const MyComponent = () => {
  const confirm = useConfirm();
  
  const handleClick = async () => {
    try {
      await confirm();
      // User confirmed choice
    } catch (error) {
      // User cancelled
    }
  };
  
  return (
    <button onClick={handleClick}>
      Confirm
    </button>
  );
};

Summary

Material-UI Confirm is a package that provides simple confirmation dialogs for React applications. It is built on top of @mui/material and is easy to use thanks to React Hooks. The package allows users to easily confirm their choices and provides customization options for the dialog.