Exploring JavaScript Libraries
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
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
Material-UI has an extremely robust and customizable slider component. Naturally, I want to push it even farther. In this demo, I’ll create slider thumbs that have images and set slider behavior based on slider position. Code Sandbox link is in the Resources section. MUI Slider Image Thumbs There are two methods for creating slider thumbs … Read more
Material-UI’s Box component is the perfect tool for constructing your layout precisely as desired. In this example I will wrap Buttons in the Box component and align left, center, and right with justifyContent. I will align vertically with alignItems. Then I will add margin and padding for additional spacing. This tutorial show both MUI v4 … Read more
Material-UI AppBar is a useful component for positioning titles, hamburger menus, admin buttons, and more. Styling the AppBar background color, text color, positioning, font, and any other CSS property is a common need and can be tricky to figure out. This demo will show several methods for customizing the AppBar, with a particular focus on … Read more
The purpose of this tutorial is to demonstrate how to use query params in React Router, including using nested routes. However, instead of a boring how-to, I created a tutorial that includes: Dynamically loading Material-UI (MUI) icons. Using Material-UI Buttons as React Router Links. Programmatically setting the route using the useHistory React Router Hook. Extracting query params using … Read more
A search bar on a UI table is a feature many users have come to expect. However, the Material-UI Table component does not have an out-of-the-box search feature. The React community has created several Material-UI search bar examples and solutions, two of which I will discuss in this article. There is also no filter by … Read more
