Example.js

const Demo = () => {
    const [open, setOpen] = useState(false)
    return (
        <>
            <button onClick={() => setOpen(true)}>Open Modal</button>
            <Modal open={open} onClose={() => setOpen(false)}>
                <Modal.Header>Modal Header goes here</Modal.Header>
                <Modal.Content>Modal Content goes here</Modal.Content>
                <Modal.Footer>Modal Footer goes here</Modal.Footer>
            </Modal>
        </>
    )
}

// This is how the modal can be shown 

modal.js

import React, {useEffect} from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import {faTimesCircle} from '@fortawesome/free-solid-svg-icons'

import Header from './Header'
import Content from './Content'
import Footer from './Footer'
import {Backdrop, ModalBox, Wrapper, CloseIcon} from './styled'

const el = document.createElement('div')
const modal = document.getElementById('modal')

const Modal = ({open, onClose, children, position, ...props}) => {
  const closeModal = e => {
    e.stopPropagation()
    return onClose && onClose()
  }
  const onKeyUp = e => {
    if (e.which === 27 && open) {
      closeModal(e)
    }
  }
  useEffect(() => {
    document.addEventListener('keyup', onKeyUp, false)
    modal.appendChild(el)
    return () => {
      document.removeEventListener('keyup', onKeyUp, false)
      modal.removeChild(el)
    }
  })

  if (!open) {
    return null
  }
  return ReactDOM.createPortal(
    <>
      <Backdrop onClick={e => closeModal(e)}>
        <ModalBox>
          <Wrapper position={position} {...props}>
            {children}
            <CloseIcon icon={faTimesCircle} />
          </Wrapper>
        </ModalBox>
      </Backdrop>
    </>,
    el,
  )
}

Modal.propTypes = {
  children: PropTypes.node.isRequired,
  onClose : PropTypes.func.isRequired,
  open    : PropTypes.bool.isRequired,
  position: PropTypes.oneOf(['top', 'center', 'bottom']),
}

Modal.defaultProps = {
  position: 'center',
}

Modal.Header = Header
Modal.Content = Content
Modal.Footer = Footer

export default Modal

stories.js

storiesOf('Modals', module)
  .addDecorator(storyFn => (
    <>
      <div id="modal">
        <div>{storyFn()}</div>
      </div>
    </>
  ))
  .addDecorator(withKnobs)
  .add('Modals - Basic', () => (
    <>
      <button type="button">Show Modal</button>
      <Modal open={boolean('open', false)}>
        <Modal.Header>Modal Header goes here</Modal.Header>
        <Modal.Content>Modal Content goes here</Modal.Content>
        <Modal.Footer>Modal Footer goes here</Modal.Footer>
      </Modal>
    </>
  ))