React.js Blueprint Divider Component Props

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. React.js Blueprint Divider Component helps to visually separate contents with a thin line and margin on all sides.

BluePrint Divider Component Props:

• tagName: It denotes the HTML tag name to use for the rendered element.
• className: It is a space-delimited list of class names to pass along to a child element. 

Syntax:

<Divider />

Prerequisite: Introduction and installation ReactJS

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 @blueprintjs/core

Project Structure: It will look like this:

Example 1: We are importing the Divider, and Classes from “@blueprintjs/core”. To apply the default styles of the components, we are importing “@blueprintjs/core/lib/css/blueprint.css”.

We are adding Divider Components to separate the contents of the <p> tag and passing different values as className.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Divider, Classes } from "@blueprintjs/core";

function App() {
    return (
        <div style={{ margin: 30, }}>
            <h4>ReactJS Blueprint Divider Component Props</h4>
            <p>Sample Text 1</p>
            <Divider className={Classes.HTML_TABLE_BORDERED} />
            <p>Sample Text 2</p>
            <Divider className={Classes.ELEVATION_0} />
            <p>Sample Text 3</p>
            <Divider className={Classes.ELEVATION_4} />
        </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: To the above code we are now passing different values to tagName prop.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Divider } from "@blueprintjs/core";

function App() {
    return (
        <div style={{ margin: 30, }}>
            <h4>ReactJS Blueprint Divider Component Props</h4>
            <p>Sample Text 1</p>
            <Divider tagName="button" />
            <p>Sample Text 2</p>
            <Divider tagName="a" />
            <p>Sample Text 3</p>
            <Divider tagName="div" />
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/components/divider.props