(This post was originally posted to my personal blog ) Controlling modals of all kinds (informational modals, custom alerts, image lightboxes, …) across an application is a frustrating problem that we all face when developing apps. When the app is simple, it’s sufficient to place a single component and have a state to toggle it on/off. However, things get complicated when you have different places to present the same modal or different kinds of modal to display in your app. <Modal /> There have been a couple of design solutions for this such as using the React Context API ( is an example) or manipulating ’s (as described in ). In this post, I would like to share my own design for this problem using a singleton component. What we will achieve from this solution is an imperative API like: this blog react-navigation StackNavigator this blog post <Modal /> SomeModal.show(title, content, { ...options })SomeModal.hide() (Note that this is kinda similar to guide ) react-navigation Navigating without the navigation prop is a react component and it is rendered in the top-level like this: <SomeModal /> class App extends Component { render() { // Container is your own wrapper component return ( <Container> {/* Your real app */} <SomeModal /> </Container /> ); }} So how does knows what to do when we call and methods? First, we will define component methods and , then in its constructor, we save its reference to a static property of by using (since in the constructor will be the reference to the rendered component). That reference will have access to all component methods of . We now can make two static methods and use it: SomeModal show() hide() __show() __hide() SomeModal this this SomeModal show(), hide() class SomeModal extends Component { static show() { SomeModal.__singletonRef.__show(); } static hide() { SomeModal.__singletonRef.__hide(); } constructor(props) { super(props); SomeModal.__singletonRef = this; } __show() { ... } __hide() { ... }} When doing this singleton component, we need to make sure we do not use this component twice in the app, since the reference will not be correct. This is the best fit, in my opinion, when we have a defined modal style across the app and we want to show and hide it everywhere we want to. This also allows showing and hiding modal outside of a React component. What if you have different kinds of modals? In my own project, for every kind of modal, I make a separate React component and render it to the top level like this: <Container> {...} <FeedbackModal /> <LinkPreviewModal /> <AlertModal /></Container /> Hope you found this way of working with modals useful. Please let me know your thoughts! Happy hacking!
