react-bootstrap-modal-provider

React-Bootstrap-Modal-Provider

Work in progress

React-Bootstrap-Modal-Provider is a Component that renders React-Bootstrap
modals more performantly with less markup.

$3

##### 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

##### 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 with
your desired modal configuration to modalProvider.showModal:

`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: This button closes the modal
}
});
`

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: Hide Modal,
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 (
...
this.props.modalProvider.showModal(basicModal)}>
Click me for a modal predefined by an imported function

...
)
}
}
BasicExamplePage.propTypes = { modalProvider: modalProviderShape.isRequired };

export default withModalProvider(BasicExamplePage);
...
``

$3

- [x] Create ModalProvider component
- [x] Create withModalProvider HOC
- [x] Setup build script with webpack
- [x] Setup eslint
- [x] Add examples
- [ ] Add tests
- [ ] Write README.md