How to wrap or truncate long strings in a React Material-UI ExpansionPanelSummary?

Sometimes, we want to wrap or truncate long strings in a React Material-UI ExpansionPanelSummary.

In this article, we’ll look at how to wrap or truncate long strings in a React Material-UI ExpansionPanelSummary.

How to wrap or truncate long strings in a React Material-UI ExpansionPanelSummary?

To wrap or truncate long strings in a React Material-UI ExpansionPanelSummary, we add the noWrap prop to the Typography component.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  }
}));

const useWidth = () => {
  const [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const onResize = () => {
      setWidth(window.innerWidth);
    };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return width;
};

export default function App() {
  const classes = useStyles();
  const width = useWidth();

  return (
    <div>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography
            noWrap
            className={classes.heading}
            style={{ width: width * 0.8 }}
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget. 1
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography
            noWrap
            className={classes.heading}
            style={{ width: width * 0.8 }}
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget. 2
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

We add the Typography component into the AccordionSummary component.

Then we set the style prop of each Typography component to an object with the width property set to the width we want the text to have.

As a result, we now see that the accordion headings are truncated with the ellipsis at the end.

We defined the useWidth hook to watch for the window’s width and call setWidth to set the width when the window is resized.

We watch the width by calling window.addEventListener with 'resize' and onResize.

And we remove the event listener when we unmount the component by returning a function that calls window.removeEventListener.

And then we return the width and set that as the width property of the object we set as the style prop value.

Conclusion

To wrap or truncate long strings in a React Material-UI ExpansionPanelSummary, we add the noWrap prop to the Typography component.