Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying React Material-UI Cookbook
  • Table Of Contents Toc
React Material-UI Cookbook

React Material-UI Cookbook

By : Adam Boduch
3.5 (6)
close
close
React Material-UI Cookbook

React Material-UI Cookbook

3.5 (6)
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)
close
close

Lazy loading panel content

If you're rendering expansion panels that are all collapsed by default, you don't have to populate the ExpansionPanelDetails component up front. Instead, you can wait for the user to expand the panel—then you can make whatever API calls you need in order to render the content.

How to do it...

Let's say that you have an API function that fetches content based on an index value. For example, if the first panel is expanded, the index value will be 0. You need to be able to call this function when the panel is expanded, supplying the corresponding index value. Here's what the code looks like:

import React, { useState, Fragment } from 'react';

import ExpansionPanel...
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
React Material-UI Cookbook
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon