React Material-UI Cookbook

Build captivating user experiences using React and Material-UI

Adam Boduch

• Publisher: Packt Publishing
• Year: 2019
• Print ISBN: 9781789615227
• eBook ISBN: 9781789610222
• Edition: 1
• Topic: Design
• Subtopic: Programming in JavaScript

Develop modern-day applications by implementing Material Design principles in React using Material-UI

Key Features

• Use React components to build intuitive UI elements
• Explore a variety of styles and themes in the Material-UI framework using React components
• Learn practical React recipes and best practices for building modern web applications

Book Description

Material-UI is a component library for rendering UI elements, using modern best practices from React and Material Design. This book will show you how you can create impressive and captivating modern-day web apps by implementing Material Design considerations. The book is designed to help you use a variety of Material-UI components to enhance UI functionality, along with guiding you through React best practices, and using state, context, and other new React 16.8 features.

You will start with layout and navigation, exploring the Grid component and understanding how it's used to build layouts for your Material-UI apps. Using Material-UI components, you'll then explore the technique of effectively presenting information. In later sections, you will also learn about the different components for user interactions such as the text input component and buttons. Finally, the book will get you up to speed with customizing the look and feel of your app, right from creating a Material-UI theme through to styling icons and text.

By the end of this book, you will have developed the skills you need to improve the look and feel of your applications using Material-UI components.

What you will learn

• Build the overall structure and navigation for your Material-UI app
• Present simple and complex information in a variety of ways
• Develop interactive and intuitive controls
• Group content into sections using tabs and expansion panels
• Create a general page layout with Material-UI grids
• Use lists for complex data, and cards for detailed information

Who this book is for

This book is for React developers who want to implement Material Design principles in their applications. You will also find this book helpful if you are a developer who wants to build a UI using React components without having to build your own UX framework.

App Bars - The Top Level of Every Page

In this chapter, you'll learn about the following recipes:

• Fixed position
• Hide on scroll
• Toolbar abstraction
• With navigation

Introduction

App Bars are the anchor point of any Material-UI application. They provide context and are usually always visible as the user navigates around the application.

Fixed position

You probably want your AppBar component to stay visible at all times. By using fixed positioning, AppBar components remain visible even as the user scrolls down the page.

How to do it...

You can use the fixed value of the position property. Here's how you do it:

import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const styles = theme => ({
 root: {
 flexGrow: 1
 },
 flex: {
 flex: 1
 },
 menuButton: {
 marginLeft: -12,
 marginRight: 20
 }
});

const FixedPosition = withStyles(styles)(({ classes }) => (
 <div className={classes.root}>
 <AppBar position="fixed">
 <Toolbar>
 <IconButton
 className={classes.menuButton}
 color="inherit"
 aria-label="Menu"
 >
 <MenuIcon />
 </IconButton>
 <Typography
 variant="title"
 color="inherit"
 className={classes.flex}
 >
 Title
 </Typography>
 <Button color="inherit">Login</Button>
 </Toolbar>
 </AppBar>
 <ul>
 {new Array(500).fill(null).map((v, i) => (
 <li key={i}>{i}</li>
 ))}
 </ul>
 </div>
));

export default FixedPosition;

Here's what the resulting AppBar component looks like:

How it works...

If you scroll down, you'll see how the AppBar component stays fixed, and the content scrolls behind it. Here's what it looks like if you scroll to the bottom of the page in this example:

The position property defaults to fixed. However, explicitly setting this property can help readers better understand your code.

There's more...

When the screen in this example first loads, some of...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Grids - Placing Components on the Page
• App Bars - The Top Level of Every Page
• Drawers - A Place for Navigation Controls
• Tabs - Grouping Content into Tab Sections
• Expansion Panels - Group Content into Panel Sections
• Lists - Display Simple Collection Data
• Tables - Display Complex Collection Data
• Cards - Display Detailed Information
• Snackbars - Temporary Messages
• Buttons - Initiating Actions
• Text - Collecting Text Input
• Autocomplete and Chips - Text Input Suggestions for Multiple Items
• Selection - Make Selections from Choices
• Pickers - Selecting Dates and Times
• Dialogs - Modal Screens for User Interactions
• Menus - Display Actions That Pop Out
• Typography - Control Font Look and Feel
• Icons - Enhance Icons to Match Your Look and Feel
• Themes - Centralize the Look and Feel of Your App
• Styles - Applying Styles to Components
• Other Books You May Enjoy