Cov-message-box NPM

cov-message-box

COV Message Box component using Kendo React Dialog. Modelled after C# Message Box

Install

npm install --save cov-message-box

Properties

message

The message to be displayed. Can be plain text or formatted as HTML e.g. you can pass in

<h1>Are you sure?</h1>

title

The title displayed at the top of the message box

buttonsArray

An array of strings that are used to render the buttons

            buttonsArray={["Yes", "No", "Maybe", "Cancel"]}

onClose

The callback function to be called when the message box is closed

defaultButton

A string that must match one of the strings passed to buttonsArray. Will be rendered as a primary button

editorContentStyle

The message is displayed inside a kendo react editor component. This sets styles to the content element wrapper of the Editor.

editorStyle

Sets styles of the Editor.

dialogActionsBarStyle

Sets styles of the div around the DialogActionsBar For example to center all the buttons you can use this css

{ display: "flex", justifyContent: "center", alignContent: "center" }

width

The width of the message box

height

The height of the message box

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 onShowMessageBox(messageBoxResult) {
    setDisplayMessageBox(true);
  }
  function onMessageBoxClose(messageBoxResult) {
    setDisplayMessageBox(false);
    console.log(messageBoxResult);
    switch (messageBoxResult.toUpperCase()) {
      case "NO":
        //do your no logic
        alert("user picked NO");
        break;
      case "YES":
        //do your yes logic
        alert("user picked YES");
        break;

      default:
        alert(`ERROR. Not valid: ${messageBoxResult} `);
        break;
    }
  }

  return (
    <>
      <div>
        <Button id="cancel-btn" onClick={onShowMessageBox} className="ml-5 mt-5">
          Show Message Box
        </Button>
      </div>

      {displayMessageBox === true ? (
        <div>
          <MessageBox
            message={`Are you sure?`}
            title={"Confirm Your action"}
            buttonsArray={["Yes", "No", "Maybe", "Cancel"]}
            onClose={onMessageBoxClose}
            defaultButton={"Yes"}
            editorContentStyle={{ height: "100px" }}
            editorStyle={{ textAlign: "center" }}
          ></MessageBox>
        </div>
      ) : (
        ""
      )}
    </>
  );
}

export default App;