A guide to

Managing modals in React

This is a simple guide to some approaches that i’ve seen taken to managing modals in React applications and components

Introduction

Websites use modals to enhance the user experience. Modals provide an effective way to present information and can be used to draw attention to key elements on a page. They can provide a user with a quick overview of a page’s content and can also be used to present options to the user. Modals can also be used to alert a user of an action or event that needs to be taken in order to complete a task. By using modals, websites can create a more interactive and engaging experience for their users.

Throughout this article, we will look at some of the ways that we can manage multiple modals within our application.

The typed approach

This approach is likely the most straightforward way to use modals, but it does require you to use Typescript in your codebase. We can employ a single state variable with a predefined type to control the modals on our page. The main benefits are that no unnecessary modals will be present, and we can easily identify which modals are active.

type MODALS = "CLOSED" | "CREATE_MODAL" |…