React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. A navigation bar that takes users through the steps of a process is called Steps.
The React Suite Steps Vertical helps us to create steps in the vertical direction. We just need to mention vertical in the Step attribute.Â
Syntax:
<Steps current={index} vertical>
<Steps.Item title="Some title"
description="Some description" />
</Steps>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install rsuite
Project Structure: It will look like the following.
Â
Example 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
In this example, we will learn how to How cook Tea using React Suite vertical steps.
Javascript
import react from 'react'import Steps from 'rsuite/Steps'; import 'rsuite/dist/rsuite.min.css'; Â Â export default function App() { Â Â Â Â return ( Â Â Â Â Â Â Â Â <div className="App"> Â Â Â Â Â Â Â Â Â Â Â Â <h1 style={{ color: 'green' }}> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â neveropen</h1> Â Â Â Â Â Â Â Â Â Â Â Â <h3>React Suite Steps Vertical</h3> Â Â Â Â Â Â Â Â Â Â Â Â <h6 style={{ color: 'red' }}> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â How to cook Tea?</h6> Â Â Â Â Â Â Â Â Â Â Â Â <br></br> Â Â Â Â Â Â Â Â Â Â Â Â <Steps current={5} vertical > Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Water"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Boil some water" /> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Add Tea Leaves"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Add Tea Leaves to the boiling water" /> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Add Milk"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Add some Milk" /> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Boil"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Boil for sometime" /> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Enjoy"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Enjoy your Tea" /> Â Â Â Â Â Â Â Â Â Â Â Â </Steps> Â Â Â Â Â Â Â Â </div> Â Â Â Â ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Â
Example 2 In this example, we will create vertical steps and provide colorful icons to all these vertical steps
Javascript
import react from 'react'import 'rsuite/dist/rsuite.min.css'; import Steps from 'rsuite/Steps'; Â Â import ExploreIcon from '@rsuite/icons/Explore'; import InfoOutlineIcon from '@rsuite/icons/InfoOutline'; import ReviewPassIcon from '@rsuite/icons/ReviewPass'; import ReviewIcon from '@rsuite/icons/Review'; export default function App() { Â Â Â Â return ( Â Â Â Â Â Â Â Â <div className="App"> Â Â Â Â Â Â Â Â Â Â Â Â <h1 style={{ color: 'green' }}>neveropen</h1> Â Â Â Â Â Â Â Â Â Â Â Â <h3>React Suite Steps Vertical</h3> Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps vertical > Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Step 1"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â icon={<ExploreIcon style={{ color: 'red' }} />} Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Hi Geek! I am vertical step 1 " /> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Step 2"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â icon={<InfoOutlineIcon style={{ color: 'green' }} />} Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Hi Geek! I am vertical step 2" /> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Step 3"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â icon={<ReviewIcon style={{ color: 'blue' }} />} Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Hi Geek! I am vertical step 3" /> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Steps.Item title="Step 4"Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â icon={<ReviewPassIcon style={{ color: 'orange' }} />} Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â description="Hi Geek! I am vertical step 1 4" /> Â Â Â Â Â Â Â Â Â Â Â Â </Steps> Â Â Â Â Â Â Â Â </div> Â Â Â Â ); } |
Output:
Â
Reference: https://rsuitejs.com/components/steps/#vertical
