Book Image

React Material-UI Cookbook

By : Adam Boduch
Book Image

React Material-UI Cookbook

By: Adam Boduch

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.
Table of Contents (22 chapters)

What this book covers

Chapter 1, Grids – Placing Components on the Page, uses the grid system to place components on the page.

Chapter 2, App Bars – The Top Level of Every Page, adds App Bars to the top of your UI.

Chapter 3, Drawers – A Place for Navigation Controls, uses drawers as a place to display your main navigation.

Chapter 4, Tabs – Group Content into Tab Sections, organizes your content into tabs.

Chapter 5, Expansion Panels – Group Content into Panel Sections, organizes your content into panels.

Chapter 6, Lists – Display Simple Collection Data, renders lists of items that the user can read and interact with.

Chapter 7, Tables – Display Complex Collection Data, shows in-depth details about a data collection.

Chapter 8, Cards – Display Detailed Information, uses cards to display details about a specific entity/thing/object.

Chapter 9, Snackbars – Temporary Messages, notifies the user about what's going on in your application.

Chapter 10, Buttons – Initiating Actions, explains how pressing buttons is the most common way for users to do something.

Chapter 11, Text – Collecting Text Input, allows users to input information.

Chapter 12, Autocomplete and Chips – Text Input Suggestions for Multiple Items, gives the user choices to select from as they type.

Chapter 13, Selection – Make Selections from Choices, allows the user to select from a predefined set of options.

Chapter 14, Pickers – Selecting Dates and Times, chooses date and time values using easy-to-read formats.

Chapter 15, Dialogs – Modal Screens for User Interactions, displays modal screens to collect input or show information.

Chapter 16, Menus – Display Actions that Pop Out, saves space on the screen by putting actions in menus.

Chapter 17, Typography – Control Font Look and Feel, controls the font of your UI in a systematic way.

Chapter 18, Icons – Enhance Icons to Match Your Look and Feel, customizes Material-UI icons and adds new ones.

Chapter 19, Themes – Centralize the Look and Feel of Your App, uses themes to change the look and feel of components.

Chapter 20, Styles – Applying Styles to Components, uses one of many styling solutions to design your UI.