React Suite Modal Alert dialogs
Last Updated :
15 Nov, 2022
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>GeeksforGeeks</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>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Modal Alert dialogs
</h4>
<div style={{ marginTop: 20, width: 340 }}>
<span style={{ marginRight: 20 }}>
GeeksforGeeks 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...