React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.
In this article, we’ll learn about React suite Modal alert dialogs. Alert dialogs are useful interruptions when a system wants to inform the user about a situation. The react suite modal has a role=alertdialog, which when used sets the modal as an alert dialog.
Modal Props:
- autoFocus: The Modal is opened and is automatically focused on its own when this is set to true.
- backdrop: The Modal will display the background in its opened state when this is set to true.
- backdropClassName: It is used to add an optional extra class name to .modal-backdrop.
- classPrefix: It denotes the prefix of the component CSS class.
- dialogClassName: It is used for the CSS class applied to Dialog DOM nodes.
- enforceFocus: The Modal will prevent the focus from leaving when opened when this is set to true.
- keyboard: It closes a modal when the ESC key is pressed.
- onClose: It is a callback function fired when Modal hides.
- onEnter: It is a callback function that is triggered before the Modal transitions in.
- onEntered: It is a callback function that is triggered after the Modal finishes transitioning in.
- onEntering: It is a callback function that is triggered as the Modal begins to transition in.
- onExit: It is a callback function that is triggered right before the Modal transitions out.
- onExited: It is a callback function that is triggered after the Modal finishes transitioning out.
- onExiting: It is a callback function that is triggered as the Modal begins to transition out.
- onOpen: It is a callback function that is triggered when Modal displays.
- overflow: It automatically sets the height when the body content is too long.
- size: It sets the Modal size.
Modal.Header Props:
- as: It is used to add a custom element for this component.
- classPrefix: It denotes the prefix of the component CSS class.
- closeButton: It displays the close button.
- onHide: It is a callback function that is triggered when Modal is hidden.
Modal.Title Props:
- as: It is used to add a custom element for this component.
- classPrefix: It denotes the prefix of the component CSS class.
Modal.Footer Props:
- as: It is used to add a custom element for this component.
- classPrefix: It denotes the prefix of the component CSS class.
Modal.Body Props:
- as: It is used to add a custom element for this component.
- classPrefix: It denotes the prefix of the component CSS class.
Syntax:
// Import Statement
import { Modal } from "rsuite";
// App.Js File
Function App() {
return (
<Modal role="alertdialog">
...
</Modal>
);
}
Creating React Application And Installing Module:
Step 1: Create a React application using the given command:
npm create-react-app projectname
Step 2: After creating your project, move to it using the given command:
cd projectname
Step 3: Now Install the rsuite node package using the given command:
npm install rsuite
Project Structure: Now your project structure should look like the following:
Example 1: Below example demonstrates a basic alert modal dialog.
Javascript
import "rsuite/dist/rsuite.min.css";import { Button, Modal } from "rsuite";import { RemindFill } from "@rsuite/icons";import { useState } from "react";export default function App() { const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Modal Alert dialogs </h4> <div style={{ marginTop: 20, width: 340 }}> <span> Are you sure want to cancel this transaction? </span> <Button onClick={handleOpen}>Cancel</Button> <Modal backdrop="static" role="alertdialog" open={open} onClose={handleClose} size="sm" > <Modal.Body> <RemindFill style={{ color: "red", fontSize: 20, }} /> Once canceled, you will not be able to recover this transaction. Are you sure you want to cancel this transaction? </Modal.Body> <Modal.Footer> <Button onClick={handleClose} appearance="primary"> Yes </Button> <Button onClick={handleClose} appearance="subtle"> No </Button> </Modal.Footer> </Modal> </div> </div> </center> );} |
Output:
Example 2: Below example demonstrates an alert modal having links and images as content.
Javascript
import "rsuite/dist/rsuite.min.css";import { Button, Modal } from "rsuite";import MapMarker from "@rsuite/icons/legacy/MapMarker";import { useState } from "react";export default function App() { const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Modal Alert dialogs </h4> <div style={{ marginTop: 20, width: 340 }}> <span style={{ marginRight: 20 }}> neveropen wants to access your location! </span> <Button onClick={handleOpen}>Open</Button> <Modal backdrop="static" role="alertdialog" open={open} onClose={handleClose} size="xs" > <Modal.Header> Use Google's location service? </Modal.Header> <Modal.Body> <MapMarker style={{ fontSize: 20 }} /> <span style={{ marginLeft: 10 }}> Use GPS to help you find your location. </span> <br /> <span>Learn more.</span> </a> <br /> <img alt="Google map" src= style={{ width: 100, height: 100, borderRadius: 20, marginTop: 20, }} /> </Modal.Body> <Modal.Footer> <Button onClick={handleClose} appearance="primary"> Allow </Button> <Button onClick={handleClose} appearance="subtle"> Cancel </Button> </Modal.Footer> </Modal> </div> </div> </center> );} |
Output:
Reference: https://rsuitejs.com/components/modal/#alert-dialogs
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
