In this tutorial, we will learn how to Accessible modals in Gatsby using portals and additional react hooks.
Adding a modal (dialog) to your website or app is a common scenario. How can we do it in React? Specifically in Gatsby? Before React version 16, developers had to hack their way a bit to create this simple element. It’s because there wasn’t a straightforward way to create a DOM element next to root/parent element, which could cause issues with positioning (z-index, overflow: hidden). React v16 introduced a new feature called Portals that enables just that.