React Material-UI Cookbook

React Material-UI Cookbook

by Adam Boduch
Released March 2019
Publisher(s): Packt Publishing
ISBN: 9781789615227

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. React Material-UI Cookbook
  3. Dedication
  4. About Packt
    1. Why subscribe?
    2. Packt.com
  5. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Sections
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
      5. See also
    5. Get in touch
      1. Reviews
  7. Grids - Placing Components on the Page
    1. Introduction
    2. Applying breakpoints
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Filling space
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Abstracting containers and items
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. Fixed column layout
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. Changing column direction
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  8. App Bars - The Top Level of Every Page
    1. Introduction
    2. Fixed position
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Hide on scroll
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Toolbar abstraction
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. With navigation
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  9. Drawers - A Place for Navigation Controls
    1. Introduction
    2. Drawer types
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Drawer item state
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Drawer item navigation
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. Drawer sections
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. AppBar interaction
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  10. Tabs - Grouping Content into Tab Sections
    1. Introduction
    2. AppBar integration
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Tab alignment
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Rendering tabs based on state
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. Abstracting tab content
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. Tab navigation with routes
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  11. Expansion Panels - Group Content into Panel Sections
    1. Introduction
    2. Stateful expansion panels
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Formatting panel headers
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Scrollable panel content
      1. How to do it...
      2. How it works...
      3. See also
    5. Lazy loading panel content
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  12. Lists - Display Simple Collection Data
    1. Introduction
    2. Using state to render list items
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. List icons
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. List avatars and text
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. List sections
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. Nested lists
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    7. List controls
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    8. Scrolling lists
      1. How to do it...
      2. How it works...
      3. See also
  13. Tables - Display Complex Collection Data
    1. Introduction
    2. Stateful tables
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Sortable columns
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Filtering rows
      1. How to do it...
      2. How it works...
      3. See also
    5. Selecting rows
      1. How to do it...
      2. How it works...
      3. See also
    6. Row actions
      1. How to do it...
      2. How it works...
      3. See also
  14. Cards - Display Detailed Information
    1. Introduction
    2. Main content
      1. How to do it...
      2. How it works...
      3. See also
    3. Card header
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Performing actions
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. Presenting media
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. Expandable cards
      1. How to do it...
      2. How it works...
      3. See also
  15. Snackbars - Temporary Messages
    1. Introduction
    2. Snackbar content
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Controlling visibility with state
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Snackbar transitions
      1. How to do it...
      2. How it works...
      3. See also
    5. Positioning snackbars
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. Error boundaries and error snackbars
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    7. Snackbars with actions
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    8. Queuing snackbars
      1. How to do it...
      2. How it works...
      3. See also
  16. Buttons - Initiating Actions
    1. Introduction
    2. Button variants
      1. How to do it...
      2. How it works...
      3. See also
    3. Button emphasis
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Link buttons
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. Floating actions
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. Icon buttons
      1. How to do it...
      2. How it works...
      3. See also
    7. Button sizes
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  17. Text - Collecting Text Input
    1. Introduction
    2. Controlling input with state
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Placeholder and helper text
      1. How to do it...
      2. How it works...
      3. See also
    4. Validation and error display
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. Password fields
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    6. Multiline input
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    7. Input adornments
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    8. Input masking
      1. How to do it...
      2. How it works...
      3. See also
  18. Autocomplete and Chips - Text Input Suggestions for Multiple Items
    1. Introduction
    2. Building an Autocomplete component
      1. How to do it...
      2. How it works...
        1. Text input control
        2. Options menu
        3. No options available
        4. Individual option
        5. Placeholder text
        6. SingleValue
        7. ValueContainer
        8. IndicatorSeparator
        9. Clear option indicator
        10. Show menu indicator
        11. Styles
        12. The Autocomplete
      3. See also
    3. Selecting autocomplete suggestions
      1. How to do it...
      2. How it works...
      3. See also
    4. API-driven Autocomplete
      1. How to do it...
      2. How it works...
      3. See also
    5. Highlighting search results
      1. How to do it...
      2. How it works...
      3. See also
    6. Standalone chip input
      1. How to do it...
      2. How it works...
      3. See also
  19. Selection - Make Selections from Choices
    1. Introduction
    2. Abstracting checkbox groups
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Customizing checkbox items
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Abstracting radio button groups
      1. How it works...
      2. How it works...
      3. There's more...
      4. See also
    5. Radio button types
      1. How to do it...
      2. How it works...
      3. See also
    6. Replacing checkboxes with switches
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    7. Controlling selects with state
      1. How to do it...
      2. How it works...
      3. See Also
    8. Selecting multiple items
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  20. Pickers - Selecting Dates and Times
    1. Introduction
    2. Using date pickers
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Using time pickers
      1. How to do it...
      2. How it works...
      3. See also
    4. Setting initial date and time values
      1. How to do it...
      2. How it works...
      3. See also
    5. Combining date and time components
      1. How to do it...
      2. How it works...
      3. See also
    6. Integrating other date and time packages
      1. How to do it...
      2. How it works...
      3. See also
  21. Dialogs - Modal Screens for User Interactions
    1. Introduction
    2. Collecting form input
      1. How to do it...
      2. How it works...
      3. See also
    3. Confirming actions
      1. How to do it...
      2. How it works...
      3. See also
    4. Displaying alerts
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    5. API integration
      1. How to do it...
      2. How it works...
      3. See also
    6. Creating fullscreen dialogs
      1. How to do it...
      2. How it works...
      3. See also
    7. Scrolling dialog content
      1. How to do it...
      2. How it works...
      3. See also
  22. Menus - Display Actions That Pop Out
    1. Introduction
    2. Composing menus with state
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Menu scrolling options
      1. How to do it...
      2. How it works...
      3. See also
    4. Using menu transitions
      1. How to do it...
      2. How it works...
      3. See also
    5. Customizing menu items
      1. How to do it...
      2. How it works...
      3. See also
  23. Typography - Control Font Look and Feel
    1. Introduction
    2. Types of typography
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Using theme colors
      1. How to do it...
      2. How it works...
      3. See also
    4. Aligning text
      1. How to do it...
      2. How it works...
      3. See also
    5. Wrapping text
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
  24. Icons - Enhance Icons to Match Your Look and Feel
    1. Introduction
    2. Coloring icons
      1. How to do it...
      2. How it works...
      3. See also
    3. Scaling icons
      1. How to do it...
      2. How it works...
        1. Default
        2. Inherit
        3. Small
        4. Large
      3. See also
    4. Dynamically loading icons
      1. How to do it...
      2. How it works...
      3. See also
    5. Themed icons
      1. How to do it...
      2. How it works...
      3. See also
    6. Installing more icons
      1. How to do it...
      2. How it works...
      3. See also
  25. Themes - Centralize the Look and Feel of Your App
    1. Introduction
    2. Understanding the palette
      1. How to do it...
      2. How it works...
      3. See also
    3. Comparing light and dark themes
      1. How to do it...
      2. How it works...
      3. See also
    4. Customizing typography
      1. How to do it...
      2. How it works...
      3. See also
    5. Nesting themes
      1. How to do it...
      2. How it works...
      3. See also
    6. Understanding component theme settings
      1. How to do it
      2. How it works...
      3. See also
  26. Styles - Applying Styles to Components
    1. Introduction
    2. Basic component styles
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    3. Scoped component styles
      1. How to do it...
      2. How it works...
      3. There's more...
      4. See also
    4. Extending component styles
      1. How to do it...
      2. How it works...
      3. See also
    5. Moving styles to themes
      1. How to do it...
      2. How it works...
      3. See also
    6. Other styling options
      1. How to do it...
      2. How it works...
      3. See also
  27. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: React Material-UI Cookbook
  • Author(s): Adam Boduch
  • Release date: March 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789615227