Exploring JavaScript Libraries
This tutorial provides syntax for ignoring lint rules at the line, file, and package level. I focus on syntax for TypeScript-ESLint but will include TSLint and ESLint commands. TSLint was deprecated in late 2019 in favor of typescript-eslint. The combined linter is a good idea because both TSLint and ESLint are linters and many people … 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
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
