React Js Draw a Horizontal Line with Text in the Middle

To draw a horizontal line with text in the middle using React.js, you can create a component that combines HTML elements and CSS. Within the component's render method, include a <div> with a CSS class to style the line, and a <span> for the text. Apply CSS to center the text both horizontally and vertically within the <div>. Set the text content dynamically through a state or prop. You can adjust the line's length and text based on your requirements. This approach combines React's component structure with CSS for a responsive horizontal line with text centered in the middle.

written

reviewed

updated

How can you create a horizontal line with text in the middle using Reactjs?

The given React.js example demonstrates drawing a horizontal line with text in the middle. Inside the App function, a div with a class name 'container' contains a heading and a flex container. The flex container aligns its items (two divs and a paragraph) vertically in the middle. The two divs on the sides create horizontal lines with a height of 3 pixels and a green color (#004D40). The paragraph in the center, with margin applied, displays the text "Fontawesomeicons.com." This results in a visually centered horizontal line with text in a React js.

React Js Draw A Horizontal Line With Text In The Middle Example

<script type="text/babel">
    function App() {
      return (
        <div className='container'>
          <h3>React Js Draw a Horizontal Line with Text in the Middle</h3>
          <div style={{ display: "flex", alignItems: "center" }}>
            <div style={{ flex: 1, backgroundColor: "#004D40", height: "3px" }} />
            <p style={{ margin: "0 10px" }}>Fontawesomeicons.com</p>
            <div style={{ flex: 1, backgroundColor: "#004D40", height: "3px" }} />
          </div>

        </div>

      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

xxxxxxxxxx
 
<script type="text/babel">
    function App() {
      return (
        <div className='container'>
          <h3>React Js Draw a Horizontal Line with Text in the Middle</h3>
          <div style={{ display: "flex", alignItems: "center" }}>
            <div style={{ flex: 1, backgroundColor: "#004D40", height: "3px" }} />
            <p style={{ margin: "0 10px" }}>Fontawesomeicons.com</p>
            <div style={{ flex: 1, backgroundColor: "#004D40", height: "3px" }} />
          </div>
​
        </div>
​
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Draw A Horizontal Line With Text In The Middle

Pasted Image

React Js Draw a Horizontal Line with Text in the Middle | Resusable Component

  <script type="text/babel">
    const HorizontalLineWithText = ({ text }) => {
      return (
        <div className="horizontal-line">
          <div className="line"></div>
          <div className="line-text">{text}</div>
          <div className="line"></div>
        </div>
      );
    };
    function App() {
      return (
        <div className='container'>
          <h3>React Js Draw a Horizontal Line with Text in the Middle | Resusable Component</h3>
          <HorizontalLineWithText text="Horizontal Line Reusable Component" />
          <HorizontalLineWithText text="Font Awesome Icons.com" />
          <HorizontalLineWithText text="*************" />
        </div>

      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

xxxxxxxxxx
 
  <script type="text/babel">
    const HorizontalLineWithText = ({ text }) => {
      return (
        <div className="horizontal-line">
          <div className="line"></div>
          <div className="line-text">{text}</div>
          <div className="line"></div>
        </div>
      );
    };
    function App() {
      return (
        <div className='container'>
          <h3>React Js Draw a Horizontal Line with Text in the Middle | Resusable Component</h3>
          <HorizontalLineWithText text="Horizontal Line Reusable Component" />
          <HorizontalLineWithText text="Font Awesome Icons.com" />
          <HorizontalLineWithText text="*************" />
        </div>
​
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run