Draw Horizontal Line in React JS

In this post, we are going to learn how to draw a horizontal line in React JS. we will use <hr /> element (horizontal rule) to draw a horizontal line. Usually, we use a <hr /> tag to indicate the separation between document sections.

Draw Horizontal Line in React

<hr
   style={{
   background: "#6F38C5",
   height: "5px",
   border: "none",
   }}
/>
 
<hr
   style={{
   background: "#47B5FF",
   height: "2px",
   border: "none",
   }}
/>

In the above code, we have added two <hr /> (horizontal rule) tags and we have also added some styles to set the background and height properties.

As we can see the first <hr /> tag height is set to 5px and 2px for second <hr /> tag. And by default <hr /> tag as 0.5rem of margin-top and margin-bottom.

Note that the <hr /> tag does not require an end tag. It’s an empty tag.

Draw a Horizontal Line with Text in the Middle

<div style={{ display: "flex", alignItems: "center" }}>
    <div style={{ flex: 1, backgroundColor: "#6F38C5", height: "3px" }} />
 
    <p style={{ margin: "0 10px" }}>Time To Program</p>
 
    <div style={{ flex: 1, backgroundColor: "#6F38C5", height: "3px" }} />
</div>

draw horizontal line with text in middle

Here, we have used two <div> tags with some styles to draw horizontal lines. For aligning the elements in a row we are using the flexbox properties.

Also Checkout: How to Draw Rectangle on Image in React

Conclusion

In this tutorial, we have learned how to draw horizontal lines and also horizontal lines with text in middle.

Draw Horizontal Line in React JS