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. Steps is a navigation bar that guides users through the steps of a task.
Title, as the name suggests, is used to provide a Title to any step. This title is self-explanatory and reflects complete information about that particular step in fewer words.
Syntax
<Steps current={index}>
<Steps.Item title="Some title" />
</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. folder name, 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: 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 cook Maggie using React Suite steps and provide some titles for each step
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 Title</h3> <h6 style={{ color: "red" }}> How to cook Maggi?</h6> <br></br> <Steps current={0}> <Steps.Item title="Water" description="Boil some water" /> <Steps.Item title="Add Maggi" description="Add Maggi to the boiling water" /> <Steps.Item title="Add Maggie Masala" description="Add some Masala" /> <Steps.Item title="Cook" description="Cook for 2 minutes" /> <Steps.Item title="Enjoy" description="Enjoy your Meal" /> </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 titles and learn how to create React suite App
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 Title</h3> <h6 style={{ color: "red" }}> How to Create React Suite App</h6> <br></br> <Steps current={5} vertical> <Steps.Item title="npx create-react-app foldername" /> <Steps.Item title="cd foldername" /> <Steps.Item title="npm install rsuite" /> <Steps.Item title="Write your code" /> <Steps.Item title="Run cmd and type npm start" /> </Steps> </div> );} |
Output:
Reference: https://rsuitejs.com/components/steps/#title
