redux-modal-container
v0.3.0
Published
Manage modals in applications that are using react and redux.
Downloads
8
Maintainers
Readme
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