Build a Global Dialog Modal Infrastructure With React Hooks and Redux Hooks
Infrastructure for your modals to appear anywhere you like
Since dialog modals are almost inseparable from every web application, you need to build its infrastructure wisely. With React hooks (version 16.8 and up) you can reuse logic across your application easily and elegantly. In this piece we’ll go over a global management approach to creating a dialog modal infrastructure using React Hooks and Redux Hooks.
Choosing the Right Approach
Inspired by Atomic design methodology, the best practice scenario is to decouple your Modal container from your application using an external/internal reusable component library. Then you need to ask yourself where are you going to manage Modal’s logic? Are you using a global management library? Where you are going to render it — at a predetermined place in the DOM or will you append it dynamically?
There are many ways of creating Modal infrastructure and you can manage its logic using the following methods.
Manage locally
Holding a global modal component and manage a local state in every component that consumes it. You can render it with React Portal, which renders right inside the consuming components and provides a way to render children in a DOM node that exists outside the DOM hierarchy of the parent component. Another way is to also include the modal dialog element globally and append its children dynamically in the old way.
You can choose this quick implementation if you have very low use of dialog modals in your application and a negative trade-off of investing efforts in building solid infrastructure.
Manage globally
If you’re already using a state management library such as Redux, and you’re using dialog modals all over your application, you’d be better off managing its logic in a global state, creating a reusable shared logic and rendering it as a global element. These days, that easy to do with Hooks — let’s dive in!
Global Modal with React and Redux Hooks
Assuming you’re hosting your generic and reusable components in an external library, you should create a modal directory that has a <Modal /> component that renders its children: <ModalTitle />, <ModalHeader />, <ModalBody />, and<ModalFooter /> as sub and atomic components.
Consuming modal component in your application is used by creating a <ModalWrapper /> container that renders the modal component and manages its visual state using global state management hooks (e.g Redux hooks). <ModalWrapper /> container will have its view, reducer, constants, and custom Hooks files.
First, include<ModalWrapper /> in the global level:
Then, create a <ModalWrapper /> container that renders the modal dialog according to the store’s params (size, type, body, title, etc.).
Displaying a dialog modal is done by dispatching SHOW_MODAL/HIDE_MODAL actions using custom hooks with your requested params.
You can dynamically render a custom component using react.lazy which takes a function that must call a dynamic import()and must return a Promise which resolves to a module with a default export containing a React component.
If you have any special treatment, for a confirmation dialog, for example, you can create a reusable Hook for that, and basically for all of your reusable modal’s logic.
Usage Example
- Rendering a basic modal will be from the component hooks file with
useShowModalhook with all of the necessary params. - Rendering a dynamic component inside a modal is done by passing the absolute path and an optional component props.
That’s it!
Summary
Modals are common and if you are using the latest React, Redux, and React-Redux versions you can easily create your infrastructure in a modular and a reusable way.
