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

How to Override Material UI Default Styling When All Else Fails

Overwrite Material UI Styles

Anyone using Material UI has been there: you tried every trick and yet Material UI default styling is overriding your custom styling. This happens with padding, margin, colors, and more. Worry no more, I’m about to give you the Material UI bazooka. (If you haven’t tried every trick in the book, then simply start with … Read more

Four Tips for Concise JavaScript

Every developer (hopefully) shares the goal of getting more functionality with less code while maintaining readability. Here are four opportunities to do exactly that regardless of JavaScript framework: 1. Drop the else{} In this function, there’s only two possible return values: ‘Cool Cat’ or ‘Hot Dog’. There’s no need to wrap return ‘Hot Dog’; within … Read more