Exploring JavaScript Libraries
The Material-UI Popover is a handy component for giving quick information to users. However, it has characteristics of both tooltip and modal components, so it has some quirks. In this example, we’ll position the popover relative to it’s anchor element and also relative to the click position in the window. Furthermore, we’ll transform the starting … Read more
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. If you want to convert the below tutorial … 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. ***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. I include code for both MUI v4 and v5 where necessary. Styling code … Read more
Many React projects have ESLint set up and devs are fixing lint errors as they code. This is great for reducing bugs, and keeping code cleanly formatted. However, sometimes there’s a situation where a project can have a lot of linting errors (i.e. adding ESLint to an existing project) and it would be tedious for … Read more
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
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
