Open In App

React Suite Progress Vertical

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a front-end library designed for the middle platform and back-end products. The React Suite Progress component allows the user to see the progress of a certain program or any operation in the process. The <Progress.Line> component displays the progress as a line.

The vertical prop of <Progress.Line> component takes a boolean value. It defines that the progress bar is displayed vertically. It is true by default.

Syntax:

<Progress.Line vertical />

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, 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: We are importing the Progress Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

We are adding the <Progress.Line> component, one we have kept it simple in another one we are passing the percent prop with a value 60, that will cover the 60% of the component and in the vertical prop, we are setting it to false.

App.js

Javascript




import { Progress } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4> React Suite Progress Vertical</h4>
            <Progress.Line />
            <Progress.Line percent={60} vertical={false} />
        </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 see how we are passing the vertical prop to the component.

App.js

Javascript




import { Progress } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4> React Suite Progress Vertical</h4>
            <Progress.Line vertical />
            <Progress.Line percent={60} vertical={true} />
        </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/progress/#vertical



Last Updated : 26 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads