React Suite <Placeholder.Graph> Props

Last Updated : 17 Mar, 2023

React Suite is a front-end library designed for the middle platform and back-end products.

The placeholder component displays the initial state of the component for being loaded to the user.

The three types of placeholder available are:

<Placeholder.Paragraph> Paragraph placeholder
<Placeholder.Graph> Graph placeholder
<Placeholder.Grid> Grid placeholder

The three available properties of <Placeholder.Graph> are:

width: It defines the width of the graph. It is specified using a string or a number.
height: It defines the height of the graph. It is specified using a number.
active: It is a boolean value. It is used to denote whether the animation is playing or not. It is true by default.

Syntax:

<Placeholder.Graph/>

Prerequisite:

Introduction and installation reactJs

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, install create-react-app globally using the command npm -g create-react-app or 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 will mainly look at the props’ height and width. We are two <Placeholder.Graph> component which we are importing from “rsuite” in a div having background color set as black and some padding added to it.

We are setting different values for the height and width of the two <Placeholder.Graph> components.

Then within the <p> tags, we are mentioning the dimension we have added to our components.

Note: to add the default styles we are importing “rsuite/dist/rsuite.min.css”.

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

Javascript

import { Placeholder } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    return (
        <div className="App">
            <h4>React Suite <Placeholder.Graph></h4>
            <div style={{
                backgroundColor: "black",
                padding: "10px"
            }}>
                <Placeholder.Graph width="100px"
                    height={100} />
                <span style={{ padding: "5px" }}></span>
                <Placeholder.Graph width="210px"
                    height={200} />
            </div>
            <p style={{ padding: "10px 10px" }}>
                width=100px   width=210px
            </p>
 
 
            <p style={{ padding: "0px 10px" }}>
                height =100px   height=200px
            </p>
 
 
        </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 will work on the active props which take a boolean value. The default value is false.

We are adding two <Placeholder.Graph> with the same height and width but in one case the active prop is set as false and in another, the prop is set as true.

We can see the one with the active set as true animation is playing whereas in another case it is just blank, and no animation is playing.

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

Javascript

import { Placeholder } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    return (
        <div className="App">
            <h4>React Suite <Placeholder.Graph></h4>
            <div style={{
                backgroundColor: "black",
                padding: "10px"
            }}>
                <Placeholder.Graph active={false}
                    width="100px" height={100} />
                <span style={{ padding: "5px" }}></span>
                <Placeholder.Graph active={true}
                    width="100px" height={100} />
            </div>
            <p style={{ padding: "10px 10px" }}>
                active=false   active=true
            </p>
 
 
        </div>
    );
}
 
export default App;