React Suite <Modal.Header> Props

Last Updated : 05 Jul, 2022

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

The <Modal.Header> component is used to define the header of a modal component.

The Props are :

as: It denotes the element type of the component. It is ‘div’ by default but one can custom the element for this component.
classPrefix: This denotes the prefix of the component CSS class. Specifying any value here will change the name of the class of the Component. This can be useful for applying custom styling based on the class name. The default value is “modal-header”.
closeButton: It is a boolean value. It defines whether to display the close button or not. It is true by default.
onClose: A call back function gets triggered when the component gets closed.

Syntax:

<Modal> 
  <Modal.Header>....</Modal.Header>
</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:

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

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 also use react hook useState to create a state open that is initially false. We create a button open with an onClick function handleOpen that sets the open state to true.

Then we are adding the Modal component, and we are passing open with the open state that we have created. We are now adding the <Modal.Header> and within the tags, we are adding text.

In the first component, we are passing the closable prop to it, and to the following two components, we are passing as props as “h1” and “em” respectively.

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"> 
            <h4> React Suite Modal Header Prop</h4> 
            <button onClick={handleOpen}>open</button> 
            <Modal open={open}> 
                <Modal.Header closeButton>Modal Header 1</Modal.Header> 
                <Modal.Header as="h1">Modal Header 2</Modal.Header> 
                <Modal.Header as="em">Modal Header 3</Modal.Header> 
            </Modal> 
        </div> 
    ); 
} 
  
export default App;

Output:

Example 2: To the <Modal.Header> component now we are adding classPrefix prop with different values and have also added an onClose function to the last <Modal.Header> component which shows “modal header will close ” in an alert.

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); 
    }; 
  
    const handleClose = () => { 
        alert("modal header will close"); 
        setOpen(false); 
    }; 
  
    return ( 
        <div className="App"> 
            <h4> React Suite Modal Header Prop</h4> 
            <button onClick={handleOpen}>open</button> 
            <Modal open={open}> 
                <Modal.Header>Modal Header 1</Modal.Header> 
                <Modal.Header classPrefix="modal-title"
                    closeButton={false}> 
                    Modal Header 2 
                </Modal.Header> 
                <Modal.Header classPrefix="btn" 
                    onClose={handleClose}> 
                    Modal Header 3 
                </Modal.Header> 
            </Modal> 
        </div> 
    ); 
} 
  
export default App;