cov-message-box
v7.2.0
Published
COV Message Box component using Kendo React Dialog. Modelled after C# Message Box
Downloads
7
Readme
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;
License
MIT © covnpmjs