react-redux-bootstrap-modal v1.1.0

React Redux Bootstrap Modal

This project is a bootstrap wrapper for redux-modal that allows you to create a stateful modal using redux

Getting Started

To use react-redux-bootstrap-modal first add it to your project

npm install --save react-redux-bootstrap-modal
npm install --save bootstrap # bootstrap is a required peerDependency

After it's added to your project you can use it inside of your component

import * as React from 'react';
import { ModalWrapper, show } from 'react-redux-bootstrap-modal';
import { connect } from 'redux';
import MyModalBody from './somecomponent';

const MyComponent = ({showDialog}) => (
  <div>
    <button onClick={showDialog}>Show Dialog</button>
    <ModalWrapper name="my-modal" component={MyModalBody} />
  </div>
);

const ConnectedComponent = connect(null, dispatch => ({
  showDialog: dispatch(show('my-modal', { title: 'Modal Title' }))
}))(MyComponent);

To hide the dialog, either click off the screen, or add the code

import {hide} from 'react-redux-bootstrap-modal';
...
connect(null, dispatch => ({
  hideDialog: dispatch(hide('my-modal'))
}));

inside your component which will comprise your modal body

Additional API Information

react-redux-bootstrap-modal wraps the API from redux-modal You can find details to the other API function calls there. This project adds the ModalWrapper component which provides a modal using react-bootstrap as the modal component. ModalWrapper takes 2 mandatory properties:

• name - The name of the modal
• component - A React component which will be placed inside the modal body

Optional properties which are used to wrap library APIS

• connectOptions - Options which come from the connectModal in the redux-modal library
• modalOptions - These map to properties for the react-bootstrap Modal component
  • close - boolean - whether to show the close button on the modal or not
  • backdrop - Should modals have a backdrop?
  • bsSize - The size of the modal (small or large)

License

This project uses the MIT License

Project Tasks

Credit

• react-bootstrap
• redux-modal