How To Draw A Horizontal Line React

Posted on by Brent Johnson
Draw a horizontal line in React

Draw a horizontal line in React relates to HTML and CSS. There are a lot of ways to do it. I will show you some. Let’s go into detail.

Draw a horizontal line in React

Solution 1: Use <hr> tag

If you use a method that already exists in HTML or wants to use pure HTML <hr> tag is suitable for you.

Hr tag helps you to separate two paragraphs in many ways, and you can set it, but the most common is by a horizontal line. Hr tag support both HTML event attributes and HTML global attributes.

Example:

import './App.css'
 
function App() {
 
 
  return (
    <div className="App">
   <h1 >Hello from LearnShareIT</h1>
    <hr style={{width:'20%',height:'3px',backgroundColor:'black'}}></hr>
    <h1>React is a JavaScript library for building user interfaces</h1>
    <hr style={{width:'50%',height:'10px',backgroundColor:'green',borderRadius:'5px'}}></hr>
    <h1>never give up is an important thing if you want learning programming language</h1>
    <hr/>
    <h1> be patient and be persist</h1>
    </div>
   
  )
}
 
export default App

Output:

’<hr/>’  is a self-closing tag. You can right in both ways is ‘<hr></hr>’ or ‘<hr/>’ it is all fine. And it also can use a ‘style’ prop to style the element. Here I only use common style properties like width and height to resize the horizontal line, backgroundColor to change the color of the horizontal line, and borderRadius to round the horizontal line border. It is much more for you to play with.

Solution 2: Use Style element

You can also style the HTML element to make its shape a horizontal line. The most common element used is ‘<div>’. I will make a page like a page above, not with a ‘<hr>’ tag but a ‘<div>’ tag.

Example:

import { useState } from 'react'
import './App.css'
 
function App() {
  const [count, setCount] = useState(0)
 
  return (
    <div className="App">
   <h1 >Hello from LearnShareIT</h1>
    <div style={{width:'20%',height:'3px',backgroundColor:'black',position:'relative',left:'40%'}}></div>
    <h1>React is a JavaScript library for building user interfaces</h1>
    <div style={{width:'50%',height:'10px',backgroundColor:'green',borderRadius:'5px',transform:'translateX(50%)'}}></div>
    <h1>never give up is an important thing if you want learning programming language</h1>
    <div style={{width:'100%',height:'1px',backgroundColor:'black'}}></div>
    <h1> be patient and be persist</h1>
    </div>
   
  )
}
 
export default App

Output:

Here with only the <div> tag and style property, I also can draw the horizontal line like the <hr> tag.

Summary

I showed you how to draw a horizontal line in React in this tutorial. You can use pure HTML with <hr> tag or combine normal HTML tag like <div> or <span> tag with CSS attribute. When you feel familiar with react js, you can create more way and more beautiful horizontal lines.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *