Habilelabs-Logo
Blog

Effective Use of Material UI with ReactJS

August 22nd, 2020 . 9 minutes read
Blog featured image

Material UI is the world’s most popular React JS UI framework that was developed by Google in 2014. It should come as no surprise that material UI skills are a valuable asset to have.

Nowadays, material UI has gained immense popularity and has become the best choice of developers. But what makes it so popular??

First and foremost, it combines two best frontend technologies, React and Material Design.

Secondly, it set the standard of the design which is used in google apps, so every customer wants to adopt the same standard design in his project. Every designer follows the same approach in his design. 

The material UI library provides react components for faster and easier web development. With it, we can build our own design system, or start with Material Design. It provides Google’s Material Design as components for Facebook’s React. Many designers know enough about material design to design an experience to look incredible.

This blog is for any developer who thinks material UI could potentially help them produce a better user experience for their application. Here, we will see how we can integrate and use material UI in react js web apps.

Installing Material-UI Library & Dependencies

Material-UI is available as an npm package so you can directly download it with npm or yarn.

Font Icons:

Material UI uses Roboto fonts. So, we need to include them in your projects –

SVG Icons:

Material UI provides some SVG material icons. In order to use SVG icons, you must install the icons package, as below –

Components

Material UI is all components. Material UI provides ready to use components. We can directly use those components into our project

1. Grids – Placing Components on the Page

Grid adopts the responsive layout based on screen size and orientation, ensuring consistency across layouts. It is used to create responsive layouts. The grid system uses flexbox properties for high flexibility.

  • It uses two types of layout: containers and items.
  • Item widths are set in percentages, so it adopts the size of the parent element.
  • Items use padding to maintain the spacing between individual items.
  • Five grid breakpoints defined in material UI which are xs, sm, md, lg, and xl.
Grid with Breakpoints
Interactive

2. App Bars – The Top Layer of Every Screen

The app bar is the top-level component of the screen. It includes the display of information and actions relating to the current screen.

3. Drawers – A Place for Navigation Controls

Material UI gives you the flexibility to integrate drawers in web apps. It gives the option to make the drawer swipeable from left, right, top, and right. It provides a responsive drawer so need not worry about the different resolution of the screen.

Responsive Drawer

Material UI provides the Persistent drawer which can be open from left or right and can be toggled open and closed.

Persistent Drawer

One more drawer named Mini variant drawer. When it shrinks then a small mini-drawer is visible with icons.

Mini Variant Drawer

4. Tabs – Grouping content into tab sections

Tabs can be used to switch between different views.

Material UI provides various types of tabs. It provides the scrollable view in tabs so if we have more tabs then it automatically fits into the screen and provides a scrollable view. It automatically manages the viewport so developers need not worry about different aspects of the screen. We can use icons into tabs as well.

Automatic Scroll Buttons

5. Expansion Panels – Group content into panel sections

Expansion panel can be created through accordion. It provides the toggle view of content.

Simple Accordion

6. Lists – Display Simple Collection Data

Lists are continuous and long indexes of text or images. They are composed of items containing the same information which can be represented in the form of icons and text.

Material UI provides various types of lists. We can create text only lists, can include icons in a text, can be used as an avatar with text and icon.  We can include action in a list via checkbox and switch buttons. List with subheaders can be created with a sticky header at the top.

Pinned Subheader List

7. Tables – Display Complex Collection Data

Material UI provides various types of tables with action, pagination, sorting, filter functionality.

8. Cards – Display Detailed Information

Cards are a surface component of the material UI which is used to display content and actions on a single topic.

9. Snackbars – Temporary Messages

Sometimes we have to display some brief messages about the process like some errors, success, and warning messages into the screen. Snackbar components support 4 types of messages. It includes success, error, warning, and info.

We can set the position of the message as top-center, top-right, bottom-right, button-center, bottom-left, top-left. It allows us to change the transition.

10. Buttons – Initiating Actions

Material UI provides the 3 types of buttons.

1. Contained Buttons

2. Text Buttons

3. Outlined Buttons

We can include icons and labels into buttons or can create icon buttons as well. 

Buttons with Icons and Label
Icon Buttons

11. Textfield – Collecting Text Input

Material UI provides 3 types of text fields named as Standard, filled and outlined. It is used to collect text information. It’s part of the form. We can customize our text fields with the help of different props provided by material UI.

12. Autocomplete and Chips – Text input with suggestions for multiple items

Sometimes the list of select fields is too long and it’s hard to find an option into that list so material UI provides the autocomplete component which includes automatic filter functionality. If you want to choose more than one option into a long list then you can use chips.

13. Switch – Toggle the State

Switch is used to toggle the state, as under- 

14. Pickers – Selecting Dates and Times

Material UI provides the material design date and time picker which is ready to use. We can combine date and time pickers or separately use them.

15. Dialogs – Modal Screens for User Interactions

Dialogs inform or warn users before performing certain tasks. It might contain critical information, require decisions, or involve multiple tasks.

16. Menus – Display actions that pop out

Menus can be used where we need to display a list of choices to be chosen.

17. Typography – Control Font Look

Typography includes a set of standard fonts. It automatically adapts the size based on screen resolution.

18. Icons – Enhance Design Look

Not only components but also icons are provided by material UI. It provides a set of materials icons which can be directly used in the project. It provides various types of icons like filled, outlined, rounded, two tones, and sharp.

19. Themes – Centralize the Look

Material UI provides a default set of themes and it gives us an option to change them so that we can change themes based on our project and centralize them.

20. Styles – Apply styles to components 

We can customize our design and apply our own CSS with the help of makeStyles.

Conclusion:

There isn’t any other UI library for React, at least not as good as Material UI. We thought that a quick glimpse into its features, dependencies, and components will be enlightening for the beginners and those who want to give it a try.

If you find this blog this interesting then you might be interested in more such articles, like-

Thanks for visiting and reading this blog!!

Author: Prerna Saini
Share: