Wave Box: An SVG Sine Wave Animation Built With React

I simply enjoy animations. I also really like the power of SVGs for creating images. In this demo we’ll use a bit of trigonometry math to create a slick SVG wave animation. See the sine wave in action in this YouTube video. Sometimes we build cool stuff that has no practical purpose. This wave box … Read more

How to Change MUI TextField’s Border Color (Hover, Focus, Overrides, and More)

I spent quite a few hours recently on a seemingly simple task: customizing the border color of a Material-UI TextField when outlined variant and disabled state were applied. The TextField is a complex component to style and I hope others will benefit from the examples presented here. This post includes MUI v4 and and v5 … Read more

Material-Table for React: A Step-By-Step Tutorial

material-table react examples

Material-Table is a relatively new addition to the suite of libraries providing data table functionality in React. The particular claims to fame for material-table is that it is quick to get running and built on Material-UI. It is a Table component that augments the existing Material-UI Table. In this intro to material-table I’ll implement a … Read more

Animate React Component on Render with Framer Motion

Animations in React that depend on component life cycle can be difficult to get right. Without a user event to drive our animation, you have to have a deep understanding of component life cycle and effects in order to properly trigger animations….or do you? Framer Motion handles the relationship between animation and life cycle events for … Read more

Material-Table AutoFocus on Row Add

material-table autofocus

Material-Table is a react data table based on Material-UI. It is quick to implement and will feel familiar to any developer experienced with React and MUI. It is also relatively easy to customize, such as adding autoFocus to the first input when adding a new row to a table. I recently was using an editable … Read more