React Create a Horizontal Divider with Text In between

user_13346299 0
Viewed 24473

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>
  );
 }
material-ui reactjs divider
5 Answers

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 material ui divider with text at center

user_68850470

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;
}
user_98685490
user_116500630

The current answer causes any text with spaces in-between to wrap: Image

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

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

enter image description here

user_75000190

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

user_142584590
Related