title: Globally accessible modal component in react
body: <p>I am struggling to find a neat way to implement modals that are accessible from anywhere in my app. </p>
  
  <p>I want to avoid having a local state with <code>isOpen</code> in every component that has a modal, since only one modal should be visible at once. I also want to avoid having to send down props to all components since it's uncertain from which components the modal should be able to be activated in the future.</p>
  
  <p>I attempted solving it with Redux, having a base modal component implemented in my top-level <code>App</code> component, then storing <code>isOpen</code> and <code>component</code> in a modal substate in Redux, but this introduced a lot of problems since that component has to be updated every time a user interacts with the modal.</p>
  
  <p>I also made an attempt using React 16's Portals, but it didn't seem to fit my needs. Help appreciated. Any ideas or best practices here?</p>