React Create a Horizontal Divider with Text In between

I need to create a React component that is a Horizontal Divider with a content like text In between. All the resources I have online is unable to help me get this done. I tried a material-ui divider by creating a Divider component and placing my text in-between like the example below:

<Divider>Or</Divider>

But I get the error:
hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

I need to achieve this in the image below:

Display a horizontal Divider

Any help will be appreciated.

These are my codes below:

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Divider from '@material-ui/core/Divider';

 const useStyles = makeStyles((theme) => ({
   root: {
   width: '100%',
   maxWidth: 360,
   backgroundColor: theme.palette.background.paper,
 },
 }));

 export default function ListDividers() {
 const classes = useStyles();

 return (
 <List component="nav" className={classes.root} aria-label="mailbox 
 folders">

  <Divider>Or</Divider>

  </List>
  );
 }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Using Material UI.

import React from "react";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    alignItems: "center"
  },
  border: {
    borderBottom: "2px solid lightgray",
    width: "100%"
  },
  content: {
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5),
    paddingRight: theme.spacing(2),
    paddingLeft: theme.spacing(2),
    fontWeight: 500,
    fontSize: 22,
    color: "lightgray"
  }
}));

const DividerWithText = ({ children }) => {
 const classes = useStyles();
 return (
  <div className={classes.container}>
    <div className={classes.border} />
    <span className={classes.content}>{children}</span>
    <div className={classes.border} />
  </div>
 );
};
export default DividerWithText;

You can import and use it like the below
<DividerWithText>Or</DividerWithText>

Result
React Create a Horizontal Divider with Text In between

Method 2

Here a custom example of what you could do : repro on stackblitz

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

const App = () => {
  return <Divider>Or</Divider>;
};

const Divider = ({ children }) => {
  return (
    <div className="container">
      <div className="border" />
      <span className="content">
        {children}
      </span>
      <div className="border" />
    </div>
  );
};

render(<App />, document.getElementById("root"));

And the CSS:
.container{
  display: flex;
  align-items: center;
}

.border{
  border-bottom: 1px solid black;
  width: 100%;
}

.content {
  padding: 0 10px 0 10px;
}

Method 3

Update 29/03/2022

That’s now possible with Material UI 🔥

https://mui.com/components/dividers/#dividers-with-text


You may want different spacing sometime

<Divider spacing={1}>Hello World</Divider>

Or

<Divider spacing={2}>Hello World</Divider>

For a configurable spacing here a Github Gist

Or a playground in codesandbox if you prefer

React Create a Horizontal Divider with Text In between

Method 4

The current answer causes any text with spaces in-between to wrap:
React Create a Horizontal Divider with Text In between

If that happens, changing width: 100% to flexGrow: 1 should solve it:

  border: {
    borderBottom: "2px solid lightgray",
    flexGrow: 1,
  }

React Create a Horizontal Divider with Text In between

Method 5

Unfortunately for now, having Divider with text on it in MUI is only available in v5, which is still in alpha stage. If you would like to try, you can download the alpha package, but be warned that it is still highly unstable and a lot of changes might be needed to migrate to v5, which is not very worth it.

GitHub discussion: https://github.com/mui-org/material-ui/issues/24036


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x