A 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 Sizes. The modal can be different sizes which include extra-small, small, medium, large, and full page.
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 size="xs || sm || md || lg || full">
...
</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 an “xs” size of the modal.
Javascript
import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
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 Sizes</h4>
<div style={{ marginTop: 20, width: 340 }}>
<Button onClick={handleOpen}>Open</Button>
<Modal
open={open}
onClose={handleClose}
size="xs"
>
<Modal.Header>
GeeksforGeeks
</Modal.Header>
<Modal.Body>
<p>This is a <b>xs</b> modal</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose} appearance="primary">
Ok
</Button>
<Button onClick={handleClose} appearance="subtle">
Cancel
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
</center>
);
} |
Output:
Example 2: Below example demonstrates an “sm” size of the modal.
Javascript
import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
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 Sizes</h4>
<div style={{ marginTop: 20, width: 340 }}>
<Button onClick={handleOpen}>Open</Button>
<Modal
open={open}
onClose={handleClose}
size="sm"
>
<Modal.Header>
GeeksforGeeks
</Modal.Header>
<Modal.Body>
<p>This is a <b>sm</b> modal</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose} appearance="primary">
Ok
</Button>
<Button onClick={handleClose} appearance="subtle">
Cancel
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
</center>
);
} |
Output:
Example 3: Below example demonstrates an “md” size of the modal.
Javascript
import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
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 Sizes</h4>
<div style={{ marginTop: 20, width: 340 }}>
<Button onClick={handleOpen}>Open</Button>
<Modal
open={open}
onClose={handleClose}
size="md"
>
<Modal.Header>
GeeksforGeeks
</Modal.Header>
<Modal.Body>
<p>This is a <b>md</b> modal</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose} appearance="primary">
Ok
</Button>
<Button onClick={handleClose} appearance="subtle">
Cancel
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
</center>
);
} |
Output:
Example 4: Below example demonstrates an “lg” size of the modal.
Javascript
import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
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 Sizes</h4>
<div style={{ marginTop: 20, width: 340 }}>
<Button onClick={handleOpen}>Open</Button>
<Modal
open={open}
onClose={handleClose}
size="lg"
>
<Modal.Header>
GeeksforGeeks
</Modal.Header>
<Modal.Body>
<p>This is a <b>lg</b> modal</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose} appearance="primary">
Ok
</Button>
<Button onClick={handleClose} appearance="subtle">
Cancel
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
</center>
);
} |
Output:
Example 5: Below example demonstrates a “full” size of the modal.
Javascript
import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
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 Sizes</h4>
<div style={{ marginTop: 20, width: 340 }}>
<Button onClick={handleOpen}>Open</Button>
<Modal
open={open}
onClose={handleClose}
size="full"
>
<Modal.Header>
GeeksforGeeks
</Modal.Header>
<Modal.Body>
<p>This is a <b>fullpage</b> modal</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose} appearance="primary">
Ok
</Button>
<Button onClick={handleClose} appearance="subtle">
Cancel
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
</center>
);
} |
Output:
Reference: https://rsuitejs.com/components/modal/#size