How to draw a horizontal line in React

avatar

Borislav Hadzhiev

Tue May 03 20222 min read

banner

Photo by Enzo Sanches

Draw a horizontal line in React #

To draw a horizontal line in React:

  1. Use the <hr /> tag and set the style prop on it.
  2. Set the height of the line and optionally set backGroundColor and color.
App.js
export default function App() { return ( <div> {/* 👇️ colored horizontal line */} <hr style={{ background: 'lime', color: 'lime', borderColor: 'lime', height: '3px', }} /> {/* 👇️ colored horizontal line */} <div style={{ background: 'lime', height: '3px', }} /> {/* 👇️ basic horizontal line */} <hr /> {/* 👇️ horizontal line with text */} <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}} > <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} /> <div> <p style={{width: '70px', textAlign: 'center'}}>Example</p> </div> <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} /> </div> </div> ); }

react horizontal line

The code sample shows how to draw horizontal lines in React.

Notice that the <hr /> (horizontal rule) tag is self-closing.

The <hr /> element represents a thematic break between paragraph-level elements.

Like with any other tag, we are able to set a style prop to style the element inline.

App.js
<hr style={{ background: 'lime', color: 'lime', borderColor: 'lime', height: '3px', }} />

Notice that we used two sets of curly braces when passing the style prop to the div element.

The outer set of curly braces marks an expression that is to be evaluated, and the inner set is the object of styles and values.

You can also draw a horizontal line with text in the middle.

App.js
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}} > <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} /> <div> <p style={{width: '70px', textAlign: 'center'}}>Example</p> </div> <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} /> </div>

Make sure to adjust the width of the p element depending on the width of the actual content.

Use the search field on my Home Page to filter through my more than 1,000 articles.