cov-message-box

cov-message-box

A React message-box dialog component built on Kendo React Dialog, modelled after the familiar C# MessageBox pattern. Render customizable confirmation dialogs with configurable buttons, HTML content, and styling.

Install

npm install --save cov-message-box

Peer Dependencies

This component requires the following peer dependencies to be installed in your project:

npm install --save react @progress/kendo-react-dialogs @progress/kendo-react-buttons @progress/kendo-react-editor lodash

Package	Version
react	^18 || ^19
@progress/kendo-react-dialogs	^14.0.0
@progress/kendo-react-buttons	^14.0.0
@progress/kendo-react-editor	^14.0.0
lodash	^4.17.21

Usage

import React, { useState } from "react";
import { MessageBox } from "cov-message-box";
import { Button } from "@progress/kendo-react-buttons";

function App() {
  const [displayMessageBox, setDisplayMessageBox] = useState(false);

  function onMessageBoxClose(messageBoxResult) {
    setDisplayMessageBox(false);

    switch (messageBoxResult.toUpperCase()) {
      case "YES":
        // handle yes
        break;
      case "NO":
        // handle no
        break;
      default:
        break;
    }
  }

  return (
    <>
      <Button onClick={() => setDisplayMessageBox(true)}>Show Message Box</Button>

      {displayMessageBox && (
        <MessageBox
          message="Are you sure?"
          title="Confirm Your Action"
          buttonsArray={["Yes", "No", "Cancel"]}
          onClose={onMessageBoxClose}
          defaultButton="Yes"
        />
      )}
    </>
  );
}

HTML Content

The message prop accepts HTML strings, allowing rich formatting:

<MessageBox
  message="<h2>Warning</h2><p>This action <strong>cannot</strong> be undone.</p>"
  title="Delete Record"
  buttonsArray={["Delete", "Cancel"]}
  onClose={handleClose}
  defaultButton="Cancel"
/>

Custom Styling

<MessageBox
  message="Are you sure?"
  title="Confirm"
  buttonsArray={["Yes", "No"]}
  onClose={handleClose}
  defaultButton="Yes"
  width={500}
  height={300}
  editorContentStyle={{ height: "100px" }}
  editorStyle={{ textAlign: "center" }}
  dialogActionsBarStyle={{ display: "flex", justifyContent: "center" }}
/>

Props

Prop	Type	Required	Description
message	string	Yes	The message to display. Supports plain text or HTML (e.g. <h1>Are you sure?</h1>).
title	string	Yes	The title displayed in the dialog header.
buttonsArray	string[]	Yes	Array of button labels to render (e.g. ["Yes", "No", "Cancel"]).
onClose	(result: string) => void	Yes	Callback invoked when a button is clicked. Receives the button label as the argument.
defaultButton	string	No	Button label that should be rendered as the primary (solid) button. Must match a value in buttonsArray.
width	number | string	No	Width of the dialog.
height	number | string	No	Height of the dialog.
editorContentStyle	object	No	CSS styles applied to the content wrapper of the internal Kendo Editor.
editorStyle	object	No	CSS styles applied to the Kendo Editor container. Merged with sensible defaults (read-only appearance, centered text, no border).
dialogActionsBarStyle	object	No	CSS styles applied to the wrapper <div> around the DialogActionsBar. Useful for centering buttons.

How It Works

• The component renders a Kendo React Dialog with a read-only Editor for the message content and a DialogActionsBar for the buttons.
• The defaultButton is rendered with a solid fill; all other buttons use an outline style.
• When any button is clicked, onClose is called with that button's label string, letting you branch your logic via a switch or if statement.

Building

npm run build

Output is written to dist/ in both ES module and CommonJS formats.

License

MIT © covnpmjs