React Suite <Modal.Title> Props

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

The <Modal.Title> component is used to define the title of a modal component.

Syntax:

<Modal> 
    <Modal.Title> ... </Modal.Title>
</Modal>

The two available Properties are:

as: This denotes the element type. By default it is ‘h4’.
classPrefix: This shows the prefix of the component CSS class i,e the default styling. By default, it is (‘modal-title’).

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: 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 we are passing open with the open state that we have created. We are now adding the <Modal.Title> and within the tags, we are adding text like “Modal Title 1”.

In the next <Modal.Title> component we are working on its as property, which is by default h4, but in this case, we are using the elementType as h1.

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</button> 
            <Modal open={open}> 
                <Modal.Title> 
                    Modal Title 1 
                </Modal.Title> 
                <Modal.Title 
                    as={() => { 
                        return <h1>Modal Title 2</h1>; 
                    }} 
                /> 
            </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 looking into classPrefix property. The default styling i,e classPrefix set for <Modal.Title> is “modal-title”.

Here we are adding different values to the classPrefix of three <Modal.Title> component to find out how it appears.

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</button> 
            <Modal open={open}> 
                <Modal.Title classPrefix="modal-title" as={"h1"}> 
                    Modal Title 1 
                </Modal.Title> 
                <Modal.Title classPrefix="modal-body"> 
                    Modal Title 2</Modal.Title> 
                <Modal.Title classPrefix="modal-footer"> 
                    Modal Title 3</Modal.Title> 
            </Modal> 
        </div> 
    ); 
} 
  
export default App;