Material UI — Utility Components

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add a click away listener, CSS resets, and portals with Material UI.

Click Away Listener

We can add a click away listener to listen to when we click outside an element.

This lets us add things like menus easily.

For example, we can write:

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

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

const handleClick = () => {
    setOpen(prev => !prev);
  };

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

return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <div>
        <button type="button" onClick={handleClick}>
          menu
        </button>
        {open ? <div>some menu</div> : null}
      </div>
    </ClickAwayListener>
  );
}

to add a menu to our app.

We have the ClickAwayListener to our App .

Then we put the stuff that we want to do something with when the user click away from inside.

We have a div that will be removed when we click outside of it.

The onClickAway prop takes a function that runs when we click away from something.

The handleClick prop toggles the open prop to toggle the menu.

handleClickAway sets open to false to close the menu.

When we click the button the menu will open.

When we click outside it, it’ll close.

Portal

The Portal component is like the React portal component.

It lets us render the dropdown into a new location outside of the DOM hierarchy.

To use it, we can write:

import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Portal from "@material-ui/core/Portal";

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

  const handleClick = () => {
    setOpen(prev => !prev);
  };

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

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <div>
        <button type="button" onClick={handleClick}>
          menu
        </button>
        {open ? (
          <Portal>
            <div>some menu.</div>
          </Portal>
        ) : null}
      </div>
    </ClickAwayListener>
  );
}

We added the Portal component, which will render the div inside in the body instead of inside the div inside the ClickAwayListener .

Leading Edge

We can configure the ClickAwayListener to listen to leading events like mouse down and touch start.

For example, we can write:

import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Portal from "@material-ui/core/Portal";

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

  const handleClick = () => {
    setOpen(prev => !prev);
  };

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

  return (
    <ClickAwayListener
      mouseEvent="onMouseDown"
      touchEvent="onTouchStart"
      onClickAway={handleClickAway}
    >
      <div>
        <button type="button" onClick={handleClick}>
          menu
        </button>
        {open ? <div>some menu.</div> : null}
      </div>
    </ClickAwayListener>
  );
}

We have a mouseEvent and touchEvent props to set the events that we listen to.

Therefore, we listen to the mouse down and touch start events.

CSS Baseline

The CssBaseline component provides CSS resets.

It provides style normalization provided by normalize.css.

It resets the CSS defaults to the same ones across every browser.

For instance, we can use it by writing:

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

export default function App() {
  return (
    <>
      <CssBaseline />
      reset
    </>
  );
}

The CssBaseline component provides a global CSS reset.

If we want to scope the CSS reset to some components, we can use the ScopedCssBaseline component.

For example, we can write:

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

export default function App() {
  return (
    <>
      <ScopedCssBaseline>reset</ScopedCssBaseline>
    </>
  );
}

We wrap the ScopedCssBaseline component around the elements that we want to reset the defaults for.

Conclusion

We can use the click away listener to listen for users clicking away from elements.

Material UI provides CSS reset components we can use to reset the defaults to make them consistent everywhere.

Portals let us render items anywhere in the DOM hierarchy.