Exploring JavaScript Libraries
The Ant Design Select component can have components rendered in its options list by adding them to the options label field. However, getting the clicks and event bubbling to play well together is challenging. In this tutorial I will create the Select with Checkboxes seen below: I used the default classes on the Select to … Read more
The ESLint max-lines-per-function rule is not enabled by default, and that is probably a good thing because it would often flag reasonable function components as too long. However, the rule can be useful when selectively applied. I believe it can ensure that developers don’t get lazy and pack too much functionality into one function. In … Read more
The MUI Theme can be customized with new values for existing breakpoints, and it can even have new breakpoints added (i.e. bg: 1000). In this tutorial we will customize theme breakpoints and show an example of every breakpoint function being used (i.e. theme.breakpoints.up and theme.breakpoints.down). Here’s a screenshot of what we will create. It can … Read more
Bootstrap 3 is still widely used, despite being two version behind the current Boostrap release. It’s grid system is intuitive and adds spacing and alignment for grid children. Margin can be tricky to add, however. In this tutorial we will create the following grid using Bootstrap 3: The grid has some margin by default. I … Read more
Sometimes just because we can code something doesn’t mean we should use it in production. That’s how I feel about creating an expandable/collapsible row in the Material UI DataGrid. In this tutorial, I added expand and collapse to the free MUI DataGrid (imported from “@mui/x-data-grid”). See the screenshot below: This feature is only available on … Read more
MUI has a great example in the docs of creating a basic MUI dropdown button. In this post I take that example and customize the position of the dropdown and the styling of the dropdown and button. Here’s what we will build: The button style changes based on the open state of the dropdown. The … Read more
The Material UI Dropdown component is not actually a specific component. Instead, there are three choices of component you can use as a “Dropdown”: Autocomplete Select TextField A basic “dropdown” version of each of these components look identical but have significantly different APIs. The Autocomplete and Select have a Popper menu by default, but the … Read more
The MUI RadioGroup is a specialized component for wrapping radio buttons and controlling alignment. As we will see later, it renders the same as a FormGroup except with role=”radiogroup”. Here’s the example we will build in this tutorial: This RadioGroup has an onChange handler and can be given error and disabled states through its parent … Read more
ESLint is a great tool for enforcing code formatting rules. There are four separate rules just for semicolons! In this tutorial I will enable all four with some options and show what it looks like when the rules are broken. Here are code examples that break each rule (with my particular config set): I will … Read more
The ESLint max-len rule is a useful rule for clean code and code organization. However, it is not enabled by default in ESLint, even with the AirBnB plugin. In this tutorial I will show several examples of using it and how to disable the rule when desired. Here is the configuration in my .eslintrc rules … Read more
