Modal implementation using React Fiber's Portal

Install

npm install --save portal-modal

Usage

This package exports a reducer and a React higher order component.

// inside main reducer
import { combineReducers } from 'redux'
import { modalReducer } from 'portal-modal'

export default combineReducers({
  modal: modalReducer
})

The portal HoC adds a showModal function to the wrapped component. This function can receive an object with props for the underlying modal component.

The withModal HoC receives an object as a second parameter in which we can specify what custom React component to be rendered as a modal. This component receives all the props passed through the showModal function.

// inside the component where we want to use the modal
import React from 'react'
import { withModal } from 'portal-modal'

const ModalComponent = ({ hideModal, dismissable, onConfirm }) => {
  return (
    <div className="modal" onClick={dismissable ? hideModal : null}>
      This is our custom modal component.
      <div>
        <button onClick={onConfirm}>Yes</button>
        <button onClick={hideModal}>Hide modal</button>
      </div>
    </div>
  )
}

class ComponentWithModal extends React.Component {
  render() {
    const { showModal } = this.props
    return (
      <div>
        <button
          onClick={() =>
            showModal({
              onConfirm: () => alert('Confirm button was pressed!'),
              dismissable: true
            })
          }
        >
          Show modal
        </button>
      </div>
    )
  }
}

export default withModal(ComponentWithModal, {
  modalComponent: ModalComponent
})