React-Bootstrap-Modal-Provider is a React Component that renders React-Bootstrap modals more performantly with less markup.
npm install react-bootstrap-modal-providerWork in progress
React-Bootstrap-Modal-Provider is a Component that renders React-Bootstrap
modals more performantly with less markup.
##### ModalProviderModalProvider 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 ModalProvidermodalProps | Object | {} | Props to be provided to the
##### 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 scope. When called within a nested , 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 .closeButton | Boolean | Displays a closeButton on when set to true.footer | String or ReactElement | The content rendered inside . No is rendered when this is null.modalProps | Object | Props that are passed to .title | String or ReactElement | The content rendered inside . No is rendered when this is null
In the component that you pass withModalProvider, you can pass an object withmodalProvider.showModal
your desired modal configuration to :
`es6`
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:
`es6`
this.props.modalProvider.showModal((modalProvider) => {
return {
title: 'This is a title',
body: 'This is a body',
footer:
}
});
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:
`es6`
//basicModal.js
...
const basicModal = ({ hideModal }) => ({
title: 'Congrats! You opened the modal.',
body:
footer: ,
closeButton: true,
});
export default basicModal;
`es6
//BasicExamplePage.jsx
import React from 'react';
import { modalProviderShape, withModalProvider } from 'react-bootstrap-modal-provider';
import basicModal from './basicModal';
class BasicExamplePage extends React.Component {
render() {
return (
...
...
)
}
}
BasicExamplePage.propTypes = { modalProvider: modalProviderShape.isRequired };
export default withModalProvider(BasicExamplePage);
...
``