Modal Toggler

app.js

import React from 'react'
import { MyModal } from 'my-modal'
import { MyModalToggleButton } from 'modal-toggle-button'

const App = () => (
  <React.Fragment>
    <MyModalToggleButton />
    <MyModal />
  </React.Fragment>
)

export default App

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

import { ModalTogglerProvider } from './modal-toggler'

ReactDOM.render(
  <ModalTogglerProvider>
    <App />
  </ModalTogglerProvider>,
  document.getElementById('app')
)

modal-toggle-button.js

import { ModalToggler } from './modal-toggler'

export const MyModalToggleButton = () => (
  <ModalToggler modal="my-modal">
    {(on, toggle) => (
      <button onClick={toggle}>
        Toggle my-modal
      </button>
    )}
  </ModalToggler>
)

modal-toggler.js

import React from 'react'

const { Provider, Consumer } = React.createContext()

export class ModalTogglerProvider extends React.Component {
  state = {}

  toggle = (modal) => (e) => this.setState((state) => ({ [modal]: !state[modal] }))

  render() {
    return (
      <Provider value={{ on: this.state, toggle: this.toggle }}>
        {this.props.children}
      </Provider>
    )
  }
}

export const ModalToggler = ({ modal, children }) => (
  <Consumer>
    {({ on, toggle }) => children(on[modal] || false, toggle(modal))}
  </Consumer>
)

my-modal.js

import { ModalToggler } from './modal-toggler'
import { Modal } from '...'

export const MyModal = () => (
  <ModalToggler modal="my-modal">
    {(on, toggle) => (
      <Modal isOpen={on}>
        My Modal content
      </Modal>
    )}
  </ModalToggler>
)