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
Contact Us