Customizing the Material-UI Theme Color Palette (MUI v5)

Material-UI is a slick and powerful component library for quickly building React apps. Material-UI’s theme palette is the foundation for uniquely theming your MUI components so that your app has a distinct “look and feel”. However, it can be challenging to extend the palette to fit your app’s distinct needs. ***UPDATED FOR MUI v5 In … Read more

How to Customize Material-UI Table Cell Width and Styling

Material-UI Table Cell Width

Customizing Material-UI Table Cell width is a common requirement. Precisely styling the TableCell component is also often requested by users. In this demo, I will show how to create a table sized with fixed width or a dynamic width that fits to the contents of the table cells. I will also set TableCell hover color, … Read more

The Ultimate Guide To Material-UI Table Row Height

Material-UI’s table component is a versatile table capable of many customizations. However, finding the proper syntax for simple styling changes can sometimes be challenging. This guide will show you how to set row height for a table row. By default, MUI Table has a minimum height of about 56px that is difficult to override. Below … Read more

The Definitive Guide to React-Spring useTransition

Deconstructing useTransition examples from the documentation and creating an original example useTransition is a powerful tool for animating a list of text, images, or components with react-spring. However, I found the documentation and examples listed on the official site to be challenging for a new react-spring user to understand. Since I wanted a detailed explanation, I created … Read more

50 Difficult JavaScript Questions to Test Your JS Knowledge

I meticulously searched the JavaScript docs to create these questions. I hope they push the limits of your JS knowledge. Let me know in the comments if you enjoyed this list! Related: Test your TypeScript knowledge against these 50 difficult TypeScript questions. 1. What will the code below output to the console and why? It … Read more

Set a Minimum Display Time for Material-UI Skeleton Loader

The Material-UI Skeleton gives a great visual treat to users of your website or app. It’s strength is that it makes the user feel as though the app is useful and useable before critical loading is completed. Let’s configure a Material-UI Skeleton Loader to display for 1 second OR the loading time of an API … Read more

The Difference Between a Tuple and an Array in TypeScript

I recently made a small utility for converting an array to an object.  I was exploring the syntax for the 2-dimensional array and wanted to investigate when a tuple was a better data structure. In my utility code below, I originally structured the array parameter as a 2-dimensional array.  However, in this case I always … Read more

Transform 2-D String Array to Object Using TypeScript and JavaScript

Sometimes you need to convert a 2-dimension array of strings into an object. Perhaps you received data from the server and need to populate your objects. Or perhaps you have data to send to the server and need to convert an array to an object parameter for the REST call. The below code is a … Read more