Chapter 12: User Interface Framework Components

If you're using React to build a user interface (UI) for your application, you probably aren't planning on creating your own UI library too. There are lots of React UI component libraries available to choose from, and there's no wrong choice, as long as the components make your life simpler.

This chapter will introduce you to the Material-UI React library. Here are the specific topics that we'll cover:

• Layout and organization
• Using navigation components
• Collecting user input
• Working with styles and themes

Technical requirements

You can find the code files present in this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-4th-Edition/tree/main/Chapter12.

Layout and organization

Material-UI provides us with several components that help us control the overall layout of our applications and organize the other UI components without each layout. This section will demonstrate how to use containers and grids.

Using containers

Often, when you're trying to lay components out on your page, the horizontal layout is the most difficult part to get right. The Container component from Material-UI is a simple but powerful layout tool. It helps to control the horizontal width of its children. Let's look at an example to see what's possible:

import "typeface-roboto";
import React, { Fragment } from "react";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
 
export default function App() {
  const textStyle = {
    backgroundColor: "#cfe8fc",
    margin: 5,
    ...

Using navigation components

Once we have an idea of how the layout of our application is going to look and work, we can start to think about the navigation. This is an important piece of our UI because it's how the user gets around the application, and it will be used frequently. In this section, we'll learn about two of the navigational components offered by Material-UI.

Navigating with drawers

The Drawer component, just like a physical drawer, slides open to reveal content that is easily accessed. When we're finished, the drawer closes again. This works well for navigation because it stays out of the way, allowing more space on the screen for the active task that the user is engaged with. Let's look at an example, starting with the App component:

import First from "./First";
import Second from "./Second";
import Third from "./Third";
 
export default function App({ links }) {
  const [open, setOpen] = useState(false...

Collecting user input

Collecting input from users can be difficult. There are many nuanced things about every field that we need to consider if we plan on getting the user experience right. Thankfully, the form components available in Material-UI take care of a lot of usability concerns for us. In this section, you'll get a brief sampling of the input controls that you can use.

Checkboxes and radio buttons

Checkboxes are useful for collecting true/false answers from users, while radio buttons are useful for getting the user to select an option from a short number of choices. Let's take a look at an example of these components in Material-UI:

import "typeface-roboto";
import React from "react";
import Checkbox from "@mui/material/Checkbox";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from
  "@mui/material/FormControlLabel";...

Working with buttons

Material-UI buttons are very similar to HTML button elements. The difference is that they're React components that work well with other aspects of Material-UI, such as theming and layout. Let's look at an example that renders different styles of buttons:

 
const buttonStyle = { margin: 10 };
 
function toggleColor(setter, value) {
  setter(value === "default" ? "primary" : "default");
}
 
export default function App() {
  const [contained, setContained] = useState("default");
  const [text, setText] = useState("default");
  const [outlined, setOutlined] = useState("default");
  const [icon, setIcon] = useState("default");
 
  return (
    <Grid container>
      <Grid
        item
       &...

Working with styles and themes

Included with Material-UI are systems for extending the styles of UI components and extending theme styles that are applied to all components. In this section, you'll learn about using both these systems.

Making styles

Material-UI comes with a styled() function that can be used to create styled components based on JavaScript objects. The return value of this function is a new component with the new styles applied.

Let's take a closer look at this approach:

import "typeface-roboto";
import React from "react";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";
 
const StyledButton = styled(Button)(({ theme }) => ({
  "&.MuiButton-root": { margin: theme.spacing(1) },
  "&.MuiButton-contained": { borderRadius:
    theme.shape.borderRadius + 2 },
  "&.MuiButton-sizeSmall...

Summary

This chapter was a very brief introduction to Material-UI, the most popular React UI framework. We started by looking at the components used to assist with the layout of our pages. We then looked at components that can help the user navigate around your application. Next, you learned how to collect user input using Material-UI form components. Finally, you learned how to style your Material-UI using styles and modifying themes.

In the next chapter, we'll look at ways to improve the efficiency of your component state updates using the latest functionality available in the latest version of React.