Exploring JavaScript Libraries
The Material-UI Container is a great all-purpose layout component. The fluid container makes it even easier to center and size components exactly as you want them. How? The fluid container expands and contracts with screen size according to a simple maxWidth prop easily passed to the component. Full React code for this tutorial is in … Read more
Normally I like to take a Material-UI component and customize it in a challenging and useful way. However, the Backdrop component is a simple mask component that might be used with a modal or used to block a section of the screen while waiting for data to load. With something this straight forward, I struggled … Read more
The Material-UI DataGrid component is designed for interacting with large data sets. However, it can be tricky to get the layout exactly like you want. What We’ll Build In this article I will construct a DataGrid with the following features (plus a Resources section): These things may not sound complicated, but custom styling individual rows … Read more
Like many component libraries, Material-UI for React comes with a Divider component. Unlike many libraries, it is possible customize the Material-UI Divider text and color through the component’s built-in API. In this article, we’ll create the below: Notice that the color of the first divider is green on the left, blue on the right. This … Read more
Chips are handy components that quickly convey information. From the Material-UI docs: “Chips are compact elements that represent an input, attribute, or action.” Chips commonly are a circle or a horizontally-shaped oval. However, I want to code a challenging chip design so that we are have to stretch MUI to the limits. We’ll build the … Read more
Card components are a common UI building block, and they need to be versatile and customizable to handle a variety of needs. React Material-UI Cards have a significant capacity to be tailored to fit your needs. In this demo we’ll create a mobile responsive card and configure the card header, content, and footer background color. … Read more
Material-UI docs contain a useful pre-built component called a “Transfer List”. You’ve likely used transfer lists before: swap selections from one side to the other and back again. In this article I’ll take Material-UI’s enhanced transfer list and, well, enhance it even more. I’ll style with elevation and box shadow, plus add in the sort … Read more
Have you ever seen an app display an alert that action is required, but didn’t give you the relevant link to take the action? Frustrating, isn’t it? In this demo, we’ll make an alert that has a React Router Link in it: In the above Alert, the Link is contained in a Button component. However, … Read more
Many React Material-UI components have incredible customizations out-of-the-box, while some are functional but missing nice-to-have options (I’m looking at you, Table-without-a-search-prop). The Autocomplete component may have the most customization options of any MUI component I’ve seen. Chips, grouping, disabled options, multiselect, custom popup items, fixed options, and more are demoed in the docs. Link to full JavaScript … Read more
Material-UI’s Paper component is intended exactly as it sounds: to give apps and components a paper-like background and feel. The Paper component is often spaced and shadowed using padding, margin, and either the elevation or outlined variant. In this demo, I’ll show the look and feel of four different React Material-UI Tables wrapped in a Paper component with different … Read more
