Blog / React

1. 

   Building a Retractable Sidebar with React and CSS

   In developing a RetractableSidebar component with React, there is something more important than the code on its own, even more important than the CSS trick we'll use to actualise the animation. This something is the understanding of how to carefully time the events at play. So, my goal with this post is to help you make yours the reasoning behind the development process, more than anything else, because once mastered that, the customisation of the RetractableSidebar component will flow naturally, by giving you an enjoyable development time.

2. 

   How to Turn Greyscale an Interactive or Static Google Map

   A greyscale Google map makes markers, polylines and whatever you might want to draw on it, to stand out naturally and with style. There's no doubt about that. Perhaps, you might think that with React repainting a Google map in greyscale is a tricky affair... Trust me, with a little help provided from an online tool and a handful of custom code, you can add to your React app an interactive or static greyscale Google map in really no time. Let's see how!

3. 

   useClickOutside() — A Custom React Hook to Intercept Clicks Falling Outside an Element

   Intercepting click events that occur outside a given element is something you might have had already the need to handle, or maybe it's something you need to translate into React code right now, whatever the case, a reusable solution is more often than not a big helping hand in speeding up development and strengthen your app's architecture. Manly for these reasons, today I want to share with you the implementation of useClickOutside(), a custom React hook spiced with some TypeScript.