React Suite is a front-end library designed for the middle platform and back-end products. Modal components are used to create dialogs, lightboxes, popovers, etc. A modal component has three distinct areas: the header, the body, and the footer. In this article, we will look into the body portion.
The <Modal.Body> component is used to define the body of a React suite modal component.
The two available properties of <Modal.Body> are:
- as: This denotes the element type of the component. The default value is ‘div’ which denotes a div element.
- classPrefix: This denotes the prefix of the component CSS class. Specifying any value here will change the name of the class of the Footer. This can be useful for applying custom styling based on the class name. The default value is ‘modal-body’.
Syntax:
<Modal>
<Modal.Body></Modal.Body>
</Modal>
Prerequisite:
- Introduction and installation reactJS
- React Suite Modal Component
- React hook useState
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Example 1: In this example, we are importing the Modal Component from rsuite, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. We are also using react hook useState to create a state open that is initially false. We are creating a button open with an onClick function handleOpen that sets the open state to true. Then we are adding the Modal component, and passing the open state. In both the <Modal.Body> components, we specifying the as property as ‘h1’ and ‘h3’.
App.js: Write the below code in the app.js file:
App.js
import { useState } from "react"; import { Modal } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const [open, setOpen] = useState(false); const handleOpen = () => { setOpen(true); }; return ( <div className="App"> <button onClick={handleOpen}>Open Modal</button> <Modal open={open}> <Modal.Title>Title of the Modal</Modal.Title> <hr /> <Modal.Body>Normal Body text</Modal.Body> <Modal.Body as='h1'> Body text as h1 </Modal.Body> <Modal.Body as='h3'> Body text as h3 </Modal.Body> </Modal> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: In this example, we are using the classPrefix property. Here we are using modal-title as the value for the classPrefix so that the styling of modal-title class is used instead.
App.js
import { useState } from "react"; import { Modal } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const [open, setOpen] = useState(false); const handleOpen = () => { setOpen(true); }; return ( <div className="App"> <button onClick={handleOpen}>Open Modal</button> <Modal open={open}> <Modal.Title>Title of the Modal</Modal.Title> <hr /> <Modal.Body classPrefix="modal-title"> Body Text as with modal-title </Modal.Body> <Modal.Body classPrefix="random-class"> Body Text as with random-class </Modal.Body> </Modal> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://rsuitejs.com/components/modal/#code-lt-modal-body-gt-code
