A Material Divider with text in middle

muiDividerWithMiddleText.jsx

import React from "react";
import { Grid, Divider as MuiDivider } from "@material-ui/core";

const Divider = ({ children, ...props }) => (
  <Grid container alignItems="center" spacing={3} {...props}>
    <Grid item xs>
      <MuiDivider />
    </Grid>
    <Grid item>{children}</Grid>
    <Grid item xs>
      <MuiDivider />
    </Grid>
  </Grid>
);

export default Divider;

Some comments

• Here is a playground in codesandbox
• It is based on Material-ui Divider
• For now, it is handling only horizontal dividers (feel free to contribute if wanted 🙂)

How it looks:

Great!! Good Job! Thank you

• Add textAlign feature

import React from "react";
import { Grid, Divider as MuiDivider } from "@material-ui/core";

const Divider = ({ children, textAlign, ...props }) => (
  <Grid container alignItems="center" spacing={3} {...props}>
    <Grid item xs={textAlign === 'left' ? 2 : true}>
      <MuiDivider />
    </Grid>
    <Grid item>{children}</Grid>
    <Grid item xs={textAlign === 'right' ? 2 : true}>
      <MuiDivider />
    </Grid>
  </Grid>
);

export default Divider;

<Divider textAlign="left">LEFT</Divider>
<Divider>CENTER</Divider>
<Divider textAlign="right">RIGHT</Divider>