react-common-mui-components

React MaterialUI's common components

Install

This library requires MaterialUI v5 and React.JS v17.

To install this library run:

npm install --save react-common-mui-components

Or

yarn add react-common-mui-components

Components

ConfirmDialog

A basic confirm dialog that show up a MaterialUI Dialog with a title, message, and two buttons to confirm or cancel an action.

useConfirmDialog

A hook that provides a way to show the dialog with an imperative call.

import { useConfirmDialog } from "react-common-mui-components"
import { deleteRecords } from "somewere"

const Page = () => {
  const {Dialog, showDialog} = useConfirmDialog();

  function handleDelete(){
    showDialog(
      "Delete All Records",
      "Are you sure you want to delete these records?",
      ()=> deleteRecords(),
      {
        labels: {
          yes: {
            label: "Yes!",
            color: "error"
          },
          no: {
            label: "No!"
          }
        }
      }
    )
  }

  return (
    <div>
      <Button onClick={handleDelete}>Delete All Records</Button>
      ...
      {/* Don't forget to place the Dialog in the tree*/}
      <Dialog/>
    </div>
  )
}

License

MIT © Wladimir Guerra