Skip to content
Related Articles

Related Articles

React Suite <Modal.Footer> Props

Improve Article
Save Article
  • Last Updated : 18 Jun, 2022
Improve Article
Save Article

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: a title or header, the body, and a footer. In this article, we will look into the footer portion.

The <Modal.Footer> component is used to define the footer of a React suite modal component.

The two available Properties of <Modal.Footer> 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. The default value is ‘modal-footer’.

Syntax:

<Modal>
    <Modal.Footer></Modal.Footer>
</Modal>

Prerequisite:

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: 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.Footer> components we specifying the as property as ‘h1’ and ‘h3’.

App.js: Write the below code in the app.js file:

Javascript




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>Body Text</Modal.Body>
                <Modal.Footer>Footer Text 1</Modal.Footer>
                <Modal.Footer as='h1'>
                    Footer Text 2 as h1
                </Modal.Footer>
                <Modal.Footer as='h3'>
                    Footer Text 3 as h2
                </Modal.Footer>
            </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

Javascript




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>Body Text</Modal.Body>
                <hr />
                <Modal.Footer>Footer Text 1</Modal.Footer>
                <Modal.Footer classPrefix="modal-title">
                    Footer Text 2
                </Modal.Footer>
                <Modal.Footer classPrefix="myfooter">
                    Footer Text 3
                </Modal.Footer>
            </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-footer-gt-code


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!