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