Category: React Answers

Sometimes, we want to resize a React Material UI button.

In this article, we’ll look at how to resize a React Material UI button.

How to resize a React Material UI button?

To resize a React Material UI button, we set can the style prop of the Button to an object that sets the dimensions of the button.

For instance, we write:

import * as React from "react";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div>
      <Button
        style={{
          maxWidth: "50px",
          maxHeight: "50px",
          minWidth: "30px",
          minHeight: "30px"
        }}
      >
        hello
      </Button>
    </div>
  );
}

We add a button by adding the Button component.

And we set the style prop of the button to an object that has the maxWidth, maxHeight, minWidth and minHeight properties.

They set the max width, max height, min width, and min height of the button.

Conclusion

To resize a React Material UI button, we set can the style prop of the Button to an object that sets the dimensions of the button.

Sometimes, we want to position MenuItems under the React Material UI Select component.

In this article, we’ll look at how to position MenuItems under the React Material UI Select component.

How to position MenuItems under the React Material UI Select component?

To position MenuItems under the React Material UI Select component, we can set the Select‘s MenuProps component to set the position of the MenuItems.

For instance, we write:

import * as React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function App() {
  return (
    <div>
      <Select
        fullWidth
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </div>
  );
}

We add the Select drop down with the MenuProps prop set to an object that has the anchorOrigin property to set the position of the menu.

We set vertical to 'bottom' and horizontal to 'left' and we set transformOrigin to an object with vertical set to 'top' and horizontal set to 'left' to put the MenuItems below the Select component.

Conclusion

To position MenuItems under the React Material UI Select component, we can set the Select‘s MenuProps component to set the position of the MenuItems.

Sometimes, we want to create a navbar with React Material-UI.

In this article, we’ll look at how to create a navbar with React Material-UI.

How to create a navbar with React Material-UI?

To create a navbar with React Material-UI, we can use the AppBar, Tabs, and Tab components.

Then we create our own TabPanel component to add the content for each tab.

For instance, we write:

import * as React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import TabContext from "@material-ui/lab/TabContext";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  }
}));

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div hidden={value !== index} {...other}>
      {value === index && (
        <Box py={3} my={6}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

export default function App() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const handleChange = (_, newValue) => setValue(newValue);

  return (
    <div className={classes.root}>
      <TabContext>
        <AppBar>
          <Tabs value={value} onChange={handleChange}>
            <Tab label="Item 1" />
            <Tab label="Item 2" />
            <Tab label="Item 3" />
            <Tab label="Item 4" />
          </Tabs>
        </AppBar>
        <TabPanel value={value} index={0}>
          Item One
        </TabPanel>
        <TabPanel value={value} index={1}>
          Item Two
        </TabPanel>
        <TabPanel value={value} index={2}>
          Item Three
        </TabPanel>
        <TabPanel value={value} index={3}>
          Item Four
        </TabPanel>
      </TabContext>
    </div>
  );
}

We wrap everything with TabContext so that we can display the right content when we click on each Tab.

We add the AppBar as the container for the Tabs.

And we add the Tab to add the link for each tab.

Next, we set the value prop to value to highlight which tab is clicked.

And we set the onChange prop to handleChange to show set the value state to the index of the tab that’s clicked.

Next, we add the TabPanel component that takes the value and index props.

If value is the same as index, then we show the content of the TabPanel.

The children prop has the contents.

As a result, when we click on each tab, we see the content updated.

Conclusion

To create a navbar with React Material-UI, we can use the AppBar, Tabs, and Tab components.

Then we create our own TabPanel component to add the content for each tab.

Sometimes, we want to submit a form by in a React Material UI dialog.

In this article, we’ll look at how to submit a form by in a React Material UI dialog.

How to submit a form by in a React Material UI dialog?

To submit a form by in a React Material UI dialog, we set the onSubmit prop to a function that calls e.preventDefault.

For instance, we write:

import * as React from "react";
import Dialog from "@material-ui/core/Dialog";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";

const useStyles = makeStyles((theme) => ({
  paper: {
    padding: "10px"
  }
}));

export default function App() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        Open Modal
      </button>
      <Dialog open={open}>
        <Box className={classes.paper}>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              handleClose();
            }}
          >
            <div>
              <TextField name="email" hintText="Email" />
            </div>
            <div>
              <TextField name="pwd" type="password" hintText="Password" />
            </div>
            <div>
              <button type="submit">Submit</button>
            </div>
          </form>
        </Box>
      </Dialog>
    </div>
  );
}

We add a Dialog with the open prop set to open state so that we make sure that the dialog is open only when open is true.

In the Dialog, we add the form element with the TextFields to add the inputs.

Then we add a button with type set to submit to run the function we set as the value of the onSubmit prop.

In the function, we call e.preventDefault to prevent the default server-side submission behavior.

And we call handleClose to set open to false to close the dialog box.

Conclusion

To submit a form by in a React Material UI dialog, we set the onSubmit prop to a function that calls e.preventDefault.

Sometimes, we want to disable outside click on a modal with React Material-UI.

In this article, we’ll look at how to disable outside click on a dialog (Modal) with React Material-UI.

How to disable outside click on a dialog modal with React Material-UI?

To disable outside click on a dialog modal with React Material-UI, we can set the onClose prop of the Modal to a function that has the reason as the 2nd parameter.

Then we can check that the reason isn’t 'backdropClick' before we close it.

For instance, we write:

import * as React from "react";
import Modal from "@material-ui/core/Modal";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  paper: {
    position: "absolute",
    backgroundColor: theme.palette.background.paper,
    border: "2px solid #000",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3)
  }
}));

export default function App() {
  const [open, setOpen] = React.useState(false);
  const classes = useStyles();

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        Open Modal
      </button>
      <Modal
        open={open}
        onClose={(_, reason) => {
          if (reason !== "backdropClick") {
            handleClose();
          }
        }}
      >
        <div className={classes.paper}>
          <p>hello world</p>
          <button type="button" onClick={handleClose}>
            Close Modal
          </button>
        </div>
      </Modal>
    </div>
  );
}

We call makeStyles with an object with some styles to return the useStyles hook.

Then we add the Modal component into App, which is opened by clicking on the Open Modal button.

The open state is controlled by the open prop.

The handleOpen function sets open to true to open the modal.

And the handleClose function sets open to false to close it.

Next, we add the Modal component to add the modal.

We set the open prop to open to control when it’s opened or closed.

And we set the onClose prop to a function that checks if the reason isn’t 'backdropClick'.

If it isn’t, we call handleClose to close the modal.

In the Modal we add a div with the content.

It has the Close Modal button that has the onClick prop set to handleClose to close the modal when we click it.

As a result, only clicking on the Close Modal button will close the modal.

Conclusion

To disable outside click on a dialog modal with React Material-UI, we can set the onClose prop of the Modal to a function that has the reason as the 2nd parameter.

Then we can check that the reason isn’t 'backdropClick' before we close it.