Category: JavaScript

Sometimes, we want to add the outline variant of the date picker with React Material UI.

In this article, we’ll look at how to add the outline variant of the date picker with React Material UI.

How to add the outline variant of the date picker with React Material UI?

To add the outline variant of the date picker with React Material UI, we set the inputVariant prop of the KeyboardDatePicker to 'outlined'.

For instance, we write:

import * as React from "react";
import "date-fns";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";

export default function App() {
  const [date, setDate] = React.useState(new Date());

  return (
    <div>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label="Date picker dialog"
          format="MM/dd/yyyy"
          value={date}
          onChange={(d) => setDate(d)}
          inputVariant="outlined"
        />
      </MuiPickersUtilsProvider>
    </div>
  );
}

First, we wrap MuiPickersUtilsProvider around the KeyboardDatePicker to make the date picker work.

We add a KeyboardDatePicker with the type prop set to 'date' to add a date picker.

Next, we set the inputVariant prop of the KeyboardDatePicker to 'outlined' to make the input show the border.

And we set the value and onChange props to let us get and set the selected date value respectively.

Conclusion

To add the outline variant of the date picker with React Material UI, we set the variant prop of the TextField to 'outlined'.

Sometimes, we want to add a close icon in React Material UI Dialog header’s top right corner.

In this article, we’ll look at how to add a close icon in React Material UI Dialog header’s top right corner.

How to add a close icon in React Material UI Dialog header’s top right corner?

To add a close icon in React Material UI Dialog header’s top right corner, we can put the title and the close icon in a Grid component.

For instance, we write:

import * as React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";

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

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>
          <Grid container justify="space-between" alignItems="center">
            <Typography variant="div">Dialog</Typography>
            <IconButton onClick={() => setOpen(false)}>
              <CloseIcon />
            </IconButton>
          </Grid>
        </DialogTitle>
        <DialogContent>
          <DialogContentText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa
            felis, dapibus eget posuere ut, lobortis id purus.
          </DialogContentText>
        </DialogContent>
      </Dialog>
    </div>
  );
}

To add the dialog box, we add the Dialog component. We also have a Open Button to open the dialog when we click it.

We set the open state with setOpen to true so that we open the dialog.

And we set the open prop of Dialog to the open state to use the open state to control when the Dialog is opened.

We add the DialogTitle component to add the dialog title. And we add the Grid component inside it to add a flex container that we use to layout the title and close button.

We set the container prop to true to add make the Grid a flex container.

And then we set justify to 'space-between' and alignItems to 'center' to put the title on the top left corner and the close button on the top right corner.

We set the onClick prop of the IconButton to a function that calls setOpen to false to close the dialog.

Also, we set the onClose prop to the same function to close it when we click outside the dialog box.

We add the dialog content in the DialogContentText component.

Conclusion

To add a close icon in React Material UI Dialog header’s top right corner, we can put the title and the close icon in a Grid component.

Sometimes, we want to set a value for TextField from Material UI with React.

In this article, we’ll look at how to set a value for TextField from Material UI with React.

How to set a value for TextField from Material UI with React?

To set a value for TextField from Material UI with React, we set the value prop of the TextField to a state value.

And we set the onChange prop to a function that sets the state to a the value that’s inputted.

For instance, we write:

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

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

  return (
    <div>
      <TextField value={value} onChange={(e) => setValue(e.target.value)} />
      <Button onClick={() => setValue("")}>Reset Text</Button>
    </div>
  );
}

We call the useState hook to create the value state and the setValue function to set the value state’s value.

Next, we set the value prop of the TextField to the value prop.

And we set the onChange prop of the TextField to a function that calls setValue with e.target.value.

e.target.value has the input value of the TextField.

Next, we add a Button that has the onClick prop set to a function that calls setValue with an empty string to let us clear the input by clicking the button.

Conclusion

To set a value for TextField from Material UI with React, we set the value prop of the TextField to a state value.

And we set the onChange prop to a function that sets the state to a the value that’s inputted.

Sometimes, we want to conditionally activate a React Material UI tooltip.

In this article, we’ll look at how to conditionally activate a React Material UI tooltip.

How to conditionally activate a React Material UI tooltip?

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.

For instance, we write:

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

const MyButton = ({ text }) => (
  <Tooltip title={text}>
    <Button>Do action</Button>
  </Tooltip>
);

export default function App() {
  return (
    <div>
      <MyButton text="hello world" />
      <MyButton text="" />
    </div>
  );
}

We create the MyButton component that takes the text prop.

And it renders a Tooltip with the Button to activate the tooltip.

Next, we render the MyButton component with text set to 'hello world' and another with text set to an empty string.

Only when we hover over the one with the text prop set to 'hello world' we’ll see the tooltip show with ‘hello world’.

When we hover over the 2nd one, we get nothing.

Conclusion

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.

Sometimes, we want to center a button in React Material UI.

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

How to center a button in React Material UI?

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <Grid container justify="center">
        <Button color="primary" size="large" type="submit" variant="contained">
          Sign Up
        </Button>
      </Grid>
    </div>
  );
}

to add the Grid prop with the container and justify props.

We set justify to 'center' to center the items inside.

Next, we add the Button inside the Grid.

As a result, we should see that the Button is centered.

Conclusion

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.