Skip to content
Related Articles
Open in App
Not now

Related Articles

React Suite Modal Alert dialogs

Improve Article
Save Article
  • Last Updated : 15 Nov, 2022
Improve Article
Save Article

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 />
                            <a href="https://www.geeksforgeeks.org">
                                <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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!