React-Bootstrap-Modal-Provider
Work in progress
React-Bootstrap-Modal-Provider is a Component that renders React-Bootstrap modals more performantly with less markup.
API
ModalProvider
ModalProvider
is a component that renders a Modal for you alongside its
children. ModalProvider
will take care of maintaining the state of its modal.
ModalProvider
can receive the following props:
Prop | Type | Default | Description |
---|---|---|---|
componentClass |
String or Component |
'div' |
The root container of ModalProvider |
modalProps |
Object |
{} |
Props to be provided to the <Modal> |
withModalProvider
withModalProvider
is a Higher Order Component that decorates the component that you
provide it with a modalProvider
prop.
The modalProvider
prop provided by withModalProvider
has the following shape:
Provided Prop | Type | Description |
---|---|---|
showModal(options: Object) |
Function |
A function that will render a modal with the options you provide it. |
hideModal() |
Function |
A function that will hide the modal of the current <ModalProvider> scope. When called within a nested <ModalProvider> , it will close the nested modal only. |
showModal
can take the following options:
Option | Type | Description |
---|---|---|
body (required) |
String or ReactElement |
The content rendered inside <Modal.Body> . |
closeButton |
Boolean |
Displays a closeButton on <Modal.Header> when set to true. |
footer |
String or ReactElement |
The content rendered inside <Modal.Footer> . No <Modal.Footer> is rendered when this is `null. |
modalProps |
Object |
Props that are passed to <Modal> . |
title |
String or ReactElement |
The content rendered inside <Modal.Title> . No <Modal.Title> is rendered when this is null |
In the component that you pass withModalProvider
, you can pass an object with
your desired modal configuration to modalProvider.showModal
:
this.props.modalProvider.showModal({ title: 'This is a title', body: 'This is a body'});
You can also pass a function to showModal
to have access to modalProvider functions,
like so:
this.props.modalProvider.showModal((modalProvider) => { return { title: 'This is a title', body: 'This is a body', footer: <button onClick={ modalProvider.hideModal }>This button closes the modal</button> }});
Recycling code for common modals is as simple as defining an export of a function or object to be passed to this.props.modalProvider.showModal
:
//basicModal.js...const basicModal = ({ hideModal }) => ({ title: 'Congrats! You opened the modal.', body: <BasicModalBody />, footer: <Button onClick={hideModal}>Hide Modal</Button>, closeButton: true,});export default basicModal;
//BasicExamplePage.jsximport React from 'react';import { modalProviderShape, withModalProvider } from 'react-bootstrap-modal-provider';import basicModal from './basicModal'; class BasicExamplePage extends React.Component { render() { return ( ... <Button onClick={() => this.props.modalProvider.showModal(basicModal)}> Click me for a modal predefined by an imported function </Button> ... ) }}BasicExamplePage.propTypes = { modalProvider: modalProviderShape.isRequired }; export default withModalProvider(BasicExamplePage);...
TODO:
- Create ModalProvider component
- Create withModalProvider HOC
- Setup build script with webpack
- Setup eslint
- Add examples
- Add tests
- Write README.md