Book Overview & Buying
Table Of Contents

React Material-UI Cookbook

By : Adam Boduch

3.5 (6)

Buy this Book

React Material-UI Cookbook

3.5 (6)

By: Adam Boduch

Buy this Book

Overview of this book

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Sections

Get in touch

Free Chapter

Grids - Placing Components on the Page

Introduction

Applying breakpoints

Filling space

Abstracting containers and items

Fixed column layout

Changing column direction

App Bars - The Top Level of Every Page

Introduction

Fixed position

Hide on scroll

Toolbar abstraction

With navigation

Drawers - A Place for Navigation Controls

Introduction

Drawer types

Drawer item state

Drawer item navigation

Drawer sections

AppBar interaction

Tabs - Grouping Content into Tab Sections

Introduction

AppBar integration

Tab alignment

Rendering tabs based on state

Abstracting tab content

Tab navigation with routes

Expansion Panels - Group Content into Panel Sections

Introduction

Stateful expansion panels

Formatting panel headers

Scrollable panel content

Lazy loading panel content

Lists - Display Simple Collection Data

Introduction

Using state to render list items

List icons

List avatars and text

List sections

Nested lists

List controls

Scrolling lists

Tables - Display Complex Collection Data

Introduction

Stateful tables

Sortable columns

Filtering rows

Selecting rows

Row actions

Cards - Display Detailed Information

Introduction

Main content

Card header

Performing actions

Presenting media

Expandable cards

Snackbars - Temporary Messages

Introduction

Snackbar content

Controlling visibility with state

Snackbar transitions

Positioning snackbars

Error boundaries and error snackbars

Snackbars with actions

Queuing snackbars

Buttons - Initiating Actions

Introduction

Button variants

Button emphasis

Link buttons

Floating actions

Icon buttons

Button sizes

Text - Collecting Text Input

Introduction

Controlling input with state

Placeholder and helper text

Validation and error display

Password fields

Multiline input

Input adornments

Input masking

Autocomplete and Chips - Text Input Suggestions for Multiple Items

Introduction

Building an Autocomplete component

Selecting autocomplete suggestions

API-driven Autocomplete

Highlighting search results

Standalone chip input

Selection - Make Selections from Choices

Introduction

Abstracting checkbox groups

Customizing checkbox items

Abstracting radio button groups

Radio button types

Replacing checkboxes with switches

Controlling selects with state

Selecting multiple items

Pickers - Selecting Dates and Times

Introduction

Using date pickers

Using time pickers

Setting initial date and time values

Combining date and time components

Integrating other date and time packages

Dialogs - Modal Screens for User Interactions

Introduction

Collecting form input

Confirming actions

Displaying alerts

API integration

Creating fullscreen dialogs

Scrolling dialog content

Menus - Display Actions That Pop Out

Introduction

Composing menus with state

Menu scrolling options

Using menu transitions

Customizing menu items

Typography - Control Font Look and Feel

Introduction

Types of typography

Using theme colors

Aligning text

Wrapping text

Icons - Enhance Icons to Match Your Look and Feel

Introduction

Coloring icons

Scaling icons

Dynamically loading icons

Themed icons

Installing more icons

Themes - Centralize the Look and Feel of Your App

Introduction

Understanding the palette

Comparing light and dark themes

Customizing typography

Nesting themes

Understanding component theme settings

Styles - Applying Styles to Components

Introduction

Basic component styles

Scoped component styles

Extending component styles

Moving styles to themes

Other styling options

Other Books You May Enjoy

Leave a review - let other readers know what you think

Text - Collecting Text Input

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

Controlling input with state
Placeholder and helper text
Validation and error display
Password fields
Multiline input
Input adornments
Input masking

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Your notes and bookmarks

React Material-UI Cookbook

By : Adam Boduch

React Material-UI Cookbook

By: Adam Boduch

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access