react-redux-promising-modals

react-redux-promising-modals - Modals for React.js

This simple redux-react component allows you to create and handle modals easily using react and redux.

Check out redux-promising-modals to dig deeper into the topic.

Basic Usage

Register the reducer

import { combineReducers } from 'redux';
import { reducer as modalsReducer } from 'react-redux-promising-modals';
 
export default combineReducers({
    /* your's reducers */
    modals: modalsReducer
});

Add middleware to the store

import { combineReducers } from 'redux';
import { createStore, applyMiddleware } from 'redux';
import { middleware as modalsMiddleware } from 'react-redux-promising-modals';
import yourReducer from 'yourReducerDirectory';
 
const store = createStore(yourReducer, applyMiddleware(modalsMiddleware));

Create a Modal dialog (Any react component can serve as a dialog)

This example uses Semantic UI Modal component

  const ConfirmModal = ({visible,closeModal})=> 
  <Modal open={visible} trigger={<Button>Basic Modal</Button>} basic size='small'>
   <Header icon='archive' content='Archive Old Messages' />
   <Modal.Content>
     <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
   </Modal.Content>
   <Modal.Actions>
     <Button basic color='red' inverted onClick={closeModal(false)}>
       <Icon name='remove' /> No
     </Button>
     <Button color='green' inverted onClick={closeModal(true)}>
       <Icon name='checkmark' /> Yes
     </Button>
   </Modal.Actions>
 </Modal>

Register the Modal dialog on the page

Usually the best place is at the bottom of the app

import Modals from 'react-redux-promising-modals';
 
<App>
  <Modals>
    <Modals.Modal name="confirm" component={ConfirmModal}/>
  </Modals>
</App>

Call the modal dialog

All additional parameters passed to showModals are passed to the modal dialog (in this example title and message)

import {withShowModals} from 'react-redux-promising-modals';
 
const Page = ({showModals,...props}) => 
  <div>
    <Button onClick={showModals({
      modal: 'confirm',
      title: 'Title',
      message: 'Message'
    })}/>
  </div>
 
export default withShowModals()(Page);

License

react-redux-promising-modals is available under MIT. See LICENSE for more details.