1.0.3 • Published 6 years ago
portal-modal v1.0.3
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
})