redux-modal-container

Redux-Modal-Container

This library provides an easy way to show and hide modals when working with Redux.

Installation

To install the latest version:

npm install --save redux-modal-container

or

yarn add redux-modal-container

How to use

Create the modals entry point (Container component needs access to the Redux state):

import { Container as ModalContainer } from 'redux-modal-container';
// ...
render(
  <Provider store={yourStore}>
    <ModalContainer 
      modals={{
        simple: () => <div>Modal 1</div>,
      }}
    />
    <MyComponent />
  </Provider>,
  document.findElementById('root')
)

Combine the modal reducer:

import { modalReducer } from 'redux-modal-container';
// ...
export const rootReducer = combineReducers({
  modals: modalReducer,
});

Trigger the modal from your connected component:

import { showModal } from 'redux-modal-container';
// ...
 
class MyComponent extends React.Component {
  trigger = () => {
    this.props.showModal('simple');
  };
  render() {
    return (
      <div>
        <button onClick={this.trigger}>Open modal</button>
      </div>
    );
  }
}
 
export default connect(null, dispatch =>
  bindActionCreators({ showModal }, dispatch),
)(MyComponent);

A full example can be found in examples directory.

License

MIT