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.

Related Content you might be interested in

Current Title:

Small book image
React Material-UI Cookbook
Adam Boduch
Mar, 2019 | 534 pages
Small book image
React and React Native
Adam Boduch | Roy Derks
Apr, 2020 | 526 pages
Small book image
React and React Native
Adam Boduch | Mikhail Sakhniuk | Roy Derks
May, 2022 | 606 pages
Small book image
Hands-On Full Stack Development with Spring Boot 2 and React.
Juha Hinkula
May, 2019 | 316 pages
Table of Contents (22 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Sections
Get in touch
Free Chapter
1
Grids - Placing Components on the Page
Grids - Placing Components on the Page
Introduction
Applying breakpoints
Filling space
Abstracting containers and items
Fixed column layout
Changing column direction
2
App Bars - The Top Level of Every Page
App Bars - The Top Level of Every Page
Introduction
Fixed position
Hide on scroll
Toolbar abstraction
With navigation
3
Drawers - A Place for Navigation Controls
Drawers - A Place for Navigation Controls
Introduction
Drawer types
Drawer item state
Drawer item navigation
Drawer sections
AppBar interaction
4
Tabs - Grouping Content into Tab Sections
Tabs - Grouping Content into Tab Sections
Introduction
AppBar integration
Tab alignment
Rendering tabs based on state
Abstracting tab content
Tab navigation with routes
5
Expansion Panels - Group Content into Panel Sections
Expansion Panels - Group Content into Panel Sections
Introduction
Stateful expansion panels
Formatting panel headers
Scrollable panel content
Lazy loading panel content
6
Lists - Display Simple Collection Data
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
7
Tables - Display Complex Collection Data
Tables - Display Complex Collection Data
Introduction
Stateful tables
Sortable columns
Filtering rows
Selecting rows
Row actions
8
Cards - Display Detailed Information
Cards - Display Detailed Information
Introduction
Main content
Card header
Performing actions
Presenting media
Expandable cards
9
Snackbars - Temporary Messages
Snackbars - Temporary Messages
Introduction
Snackbar content
Controlling visibility with state
Snackbar transitions
Positioning snackbars
Error boundaries and error snackbars
Snackbars with actions
Queuing snackbars
10
Buttons - Initiating Actions
Buttons - Initiating Actions
Introduction
Button variants
Button emphasis
Link buttons
Floating actions
Icon buttons
Button sizes
11
Text - Collecting Text Input
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
12
Autocomplete and Chips - Text Input Suggestions for Multiple Items
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
13
Selection - Make Selections from Choices
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
14
Pickers - Selecting Dates and Times
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
15
Dialogs - Modal Screens for User Interactions
Dialogs - Modal Screens for User Interactions
Introduction
Collecting form input
Confirming actions
Displaying alerts
API integration
Creating fullscreen dialogs
Scrolling dialog content
16
Menus - Display Actions That Pop Out
Menus - Display Actions That Pop Out
Introduction
Composing menus with state
Menu scrolling options
Using menu transitions
Customizing menu items
17
Typography - Control Font Look and Feel
Typography - Control Font Look and Feel
Introduction
Types of typography
Using theme colors
Aligning text
Wrapping text
18
Icons - Enhance Icons to Match Your Look and Feel
Icons - Enhance Icons to Match Your Look and Feel
Introduction
Coloring icons
Scaling icons
Dynamically loading icons
Themed icons
Installing more icons
19
Themes - Centralize the Look and Feel of Your App
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
20
Styles - Applying Styles to Components
Styles - Applying Styles to Components
Introduction
Basic component styles
Scoped component styles
Extending component styles
Moving styles to themes
Other styling options
21
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Dynamically loading icons

On screens that only have a handful of icons on them, you can directly import them as components without any issues. This can be challenging if you have a screen with many icons or if your application as a whole uses lots of icons (the latter case increases the bundle size). The answer, in both cases, is to load Material-UI icons lazily/dynamically.

How to do it...

You can leverage the lazy() higher-order component from React. Also from React, the Suspense component provides placeholders in your UI while your lazy components are fetched and rendered. This overall approach is how code-splitting is handled in React—Material-UI icons happen to be a good use case.

This example uses a Storybook...

Previous Section
End of Section 5
Next Section