Category: JavaScript

Sometimes, we want to change the dropdown icon in React Material UI select field.

In this article, we’ll look at how to change the dropdown icon in React Material UI select field.

How to change the dropdown icon in React Material UI select field?

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Person from "@material-ui/icons/Person";

export default function App() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      value={age}
      onChange={handleChange}
      IconComponent={() => <Person />}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

We set the Select‘s IconComponent prop to a function that returns the Person icon component.

And we add some MenuItem components to add some choices.

Now we should see the person icon as the drop down’s icon on the right.

Conclusion

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.

Sometimes, we want to change the height of the drawer with React Material UI.

In this article, we’ll look at how to change the height of the drawer with React Material UI.

How to change the height of the drawer with React Material UI?

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.

For instance, we write:

import React from "react";
import Drawer from "@material-ui/core/Drawer";
import MenuItem from "@material-ui/core/MenuItem";

export default function App() {
  return (
    <Drawer open PaperProps={{ style: { height: "90vh" } }}>
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  );
}

We add the drawer by adding the Drawer component.

Then we set the PaperProps prop to { style: { height: "90vh" } } to set the drawer’s height to 90vh.

Finally, we add some MenuItems in the Drawer to add some content into the drawer.

Conclusion

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.

Sometimes, we want to reference to theme’s primary color instead of a specific color in React Material UI.

In this article, we’ll look at how to reference to theme’s primary color instead of a specific color in React Material UI.

How to reference to theme’s primary color instead of a specific color in React Material UI?

To reference to theme’s primary color instead of a specific color in React Material UI, we can call the useTheme hook.

For instance, we write:

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

export default function App() {
  const theme = useTheme();

  return <span>{JSON.stringify(theme.palette.primary)}</span>;
}

We call useTheme to return the theme object.

Then we can get the colors from the theme with theme.palette.

Conclusion

To reference to theme’s primary color instead of a specific color in React Material UI, we can call the useTheme hook.

Sometimes, we want to accept only positive unsigned integer values in TextField with React Material-UI.

In this article, we’ll look at how to accept only positive unsigned integer values in TextField with React Material-UI.

How to accept only positive unsigned integer values in TextField with React Material-UI?

To accept only positive unsigned integer values in TextField with React Material-UI, we can check the value that’s entered into the TextField, then we can change values that aren’t accepted to a valid value.

For instance, we write:

import { TextField } from "material-ui";
import React, { useState } from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

const min = 1;

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <MuiThemeProvider>
      <div>
        <TextField
          type="number"
          inputProps={{ min }}
          value={value}
          onChange={(e) => {
            if (e.target.value === "") {
              setValue(e.target.value);
              return;
            }
            const value = +e.target.value;
            if (value < min) {
              setValue(min);
            } else {
              setValue(value);
            }
          }}
        />
      </div>
    </MuiThemeProvider>
  );
}

We set the onChange prop to a function that checks the inputted value.

The inputted value is stored in e.target.value.

If it’s less than min, then we set the value state to min with setValue.

Otherwise, we set value to e.target.value.

And we set the value prop to the value state.

Conclusion

To accept only positive unsigned integer values in TextField with React Material-UI, we can check the value that’s entered into the TextField, then we can change values that aren’t accepted to a valid value.

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.