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.

If you ever have needed to use the requestAnimationFrame API in an async method where you wait for an animation frame before executing additional logic, the callback nature of it might get annoying. With a super small wrapper, you can make a function that returns a promise instead!

We use GraphQL at work and one area that has always caused me a lot of pain is extracting a deeply nested, and deeply optional field from the GraphQL return type.

If you use TypeScript, you've more than likely seen keyof typeof obj at one point or another to get a union type representing the keys of the given object. But what if we want to get a subset of the object keys, based on the values in the object?

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.