React Suite Divider With Text

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. Divider allows the user to separate UI components from each other. 

Divider with Text: The user can provide context to the separation using this.

Approach: Let us create a React project and install React Suite module. Then we will create a UI that will create React Suite Divider with Text. 

Creating React Project:

Step 1: To create a react app, you need to install react modules through npx command. “npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once.

npx create-react-app project_name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project_name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new component user makes or the code changes, we will be performing will be done in the source folder.

Project Structure

Example 1: We are creating a UI that shows description of different courses divided with a divider with text.

Filename: App.js

Javascript

import React from "react";
import { Divider } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';

class App extends React.Component {

    render() {
        return (
            <div>
                <p>
                    <b style={{ color: "green" }}>DSA Self Paced
                    </b> <br /> Most popular course on DSA trusted
                    by over 75,000 students! Built with years of
                    experience by industry experts and gives you a
                    complete package of video lectures, practice
                    problems, quizzes, discussion forums and contests.
                </p>

                <Divider>
                    Geeks for Geeks Preparation - Interactive Live Courses
                </Divider>
                <p>
                    <b style={{ color: "green" }}>Amazon SDE Preparation Test
                    Series</b><br />A test series that will help you prepare
                    for coding interviews for Amazon and other product-based
                    companies. Programming questions similar to those asked
                    in real-time Amazon interviews. The perfect test series
                    to practice and test your skills!
                </p>

                <Divider>
                    Geeks for Geeks Preparation - Interactive Live Courses
                </Divider>

                <p>
                    <b style={{ color: "green" }}>Complete Interview
                    Preparation</b><br />An interview-centric course
                    designed to prepare you for the role of SDE for
                    both product and service based companies. A
                    placement preparation pack built with years of
                    expertise.
                </p>
            </div>
        );
    }
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Divider with Text

Example 2: We are creating a UI that shows different sections divided with a divider with text.

Javascript

import React from "react";
import { Divider } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';

const myComponentStyle = {
    height: 50,
    paddingTop: 15,
    backgroundColor: "green",
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
}

class App extends React.Component {
    render() {
        return (
            <div style={{ margin: 100 }}>
                <p style={myComponentStyle}>Section</p>

                <Divider>Divider 1</Divider>
                <p style={myComponentStyle}>Section</p>

                <Divider>Divider 2</Divider>
                <p style={myComponentStyle}>Section</p>

                <Divider>Divider 3</Divider>
                <p style={myComponentStyle}>Section</p>

            </div>
        );
    }
}

export default App;

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Dividers with Text 

Reference: https://rsuitejs.com/components/divider/#divider-with-text