Exploring JavaScript Libraries
Properly formatted code is a widely agreed-upon virtue in the craft of programming. There are sometimes differences of opinions on exactly what the right format is, but generally it is formatting that contributes to the readability of code and understanding of the intent of the code. Perhaps the most common rules list for ESLint is … Read more
Material-UI-Chip-Input is an excellent package created by TeamWertarbyte. It’s core functionality is that it allows a user to quickly create chips from text. Material-UI-Chip-Input has tons of functionality (and props to support it). However, one thing that is missing (actually, broken it seems) at the time of writing this article is autocomplete. The History Behind … Read more
The ESLint docs have a short section that gives the fundamentals of configuring global variables in a .eslintrc file. However, the docs do not answer the following questions: When and why would I want to define global variables in ESLint? What errors occur when I try to use global vars differently than they are configured? … Read more
Many developers experienced with Material-UI have used the theme object to customize the color palette for their apps. However, palette is one of many configurable objects within the theme object. There are 12 top-level fields within the Theme object that can be customized to give your app the exact look-and-feel that you desire (see the … Read more
The Typography component is critical for a consistent UI. This article explores how to customize the Typography component through extending the theme.typography object, creating a Typography Styled Component, and overriding the MuiTypography base class. Specifically, I will add strikethrough (textDecoration: “line-through”), font style, letter spacing, and font size to the Typography component and using the … Read more
Material-UI is an incredible library with great documentation and ever-growing online resources. I’ve written 50+ articles on Material-UI, and yet I still find new features and run across new challenges regularly. A dedicated video training course can reduce the learning curve for any new library, especially one as robust as Material-UI. I’ll review key factors … Read more
I was recently researching what to write about next and discovered that quite a few people are interested in adding checkboxes to the Material-UI Treeview component. In this Material-UI Issues thread, user dnquang1996vn shared a great Code Sandbox he created. In this post, I will dive into his code for the following reasons: It’s better … Read more
The Material-UI Drawer React component is a useful container component with a variety of positioning options. It can be anchored to the top, bottom, or sides of the viewport and opened or closed with ease. However, the Material-UI Drawer is not an easy component to position inside a div or container. I was able to … Read more
Material-UI Tabs are a handy component for easy navigation with out-of-the-box styling. However, sometimes that styling is more than we need. In this Tab Panel example, we will disable the indicator (the underline at the bottom of the Tab just above the shadow) and instead add our own styling. We will style Material-UI’s Tabs with … Read more
The Material-UI Accordion (previously known as the expansion panel) is commonly used for controlling when secondary components or information is displayed. In this example, we will build an Accordion that has components nested in both the summary and details sections and discuss the different components that compose an Accordion (AccordionSummary, AccordionActions, AccordionDetails). We will also … Read more
