CODEWITHSUNDEEP
reactjsmaterial-uidivider
Joe
Joe

Reputation: 159

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>
  );
 }

Upvotes: 14

Views: 46837

Answers (5)

Mamadou Ouologuem
Mamadou Ouologuem

Reputation: 226

Update 29/03/2022

That's now possible with Material UI 🔥

https://mui.com/material-ui/react-divider/#with-children

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

enter image description here

Upvotes: 12

Yoseph Kurnia Soenggoro
Yoseph Kurnia Soenggoro

Reputation: 382

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

Upvotes: 1

Wannabe
Wannabe

Reputation: 111

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

Upvotes: 1

DiaMaBo
DiaMaBo

Reputation: 2287

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

Upvotes: 19

Quentin Grisel
Quentin Grisel

Reputation: 4987

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

Upvotes: 14

Related Questions