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:
- Introduction and installation ReactJS
- React Suite Progress Component
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
