Bits and bytes of code

While working on a recent side project, I had the idea to build a simple API like styled components that works with Tailwind. The idea is given a list of class names, create a component that you can easily share without writing all the normal boilerplate.

Something that came up at work recently was joining buttons into a group. When joined, we wanted the buttons to have no border radius between them to achieve a nice visual aesthetic.

A common challenge in React is managing state for components that have animations. For example, closing a modal after it transitions closed, resetting the state of a copy button after the animation finishes, or removing temporary height/width from expandable containers during open/close transitions.

In a previous Byte, I showed the useStrictParams hook as a way to better manage React router params with better type safety and ease of use. Since then, I've made some improvements and published it to npm!

The useParams and useSearchParams hooks from React Router are critical when working with dynamic routes, however they have some sharp edges when used with TypeScript. With a small amount of additional code, we can make it much easier to work with params.

Using localStorage is great for storing simple user preferences such as the expanded/collapsed state of a sidebar, or the light/dark theme preference for the site. An often overlooked but useful feature of localStorage is the ability to sync changes between open tabs.