Skip to content
Redux based modal
Branch: master
Clone or download
Latest commit 3bacc12 Dec 27, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Fix export May 11, 2018
src Update to redux6 Dec 27, 2018
test Migrate to redux 6 Dec 27, 2018
.gitignore ignore coverage May 7, 2018
.prettierrc Prettier May 8, 2018
.travis.yml remove node 9 Jul 29, 2018
LICENSE Create LICENSE Sep 2, 2018 Update readme May 8, 2018
package.json Release 3.0.0 Dec 27, 2018
tsconfig.json rewrite with typescript May 7, 2018

Redux Modal

Greenkeeper badge

Build Status

redux-modal connect your modal to the redux store, and let you control your modal by simply dispatching actions.

It works with any react based modal component.

Live demo


npm i --save redux-modal



Connect a modal component to redux store.


  • config(Object)
    • name(String)(Require) The modal name.
    • resolve(Function) Things you want to resolve before show your modal, if return a promise, the modal will show after the promise resolved.
    • destroyOnHide(Bool) Whether destroy the modal state and umount the modal after hide, default is true.
    • getModalState(Function) A function that takes the entire Redux state and returns the state slice which corresponds to where the redux-modal reducer was mounted. Defaults to assuming that the reducer is mounted under the 'modal' key.


A React component class that injects modal state, handleHide and handleDestroy action creator into your modal component.


export default connectModal({ name: 'myModal' })(MyModal)

It will pass the modal state and a handleHide and handleDestroy action creator as props to your modal component.

If you mounted your modal reducer at some other location such as modals instead of modal use the getModalState config

export default connectModal({ name: 'myModal', getModalState: (state) => state.modals })(MyModal)


The modal reducer. Should be given to mounted to your Redux state at modal.


import { combineReducers } from 'redux'
import { reducer as modal } from 'redux-modal'

export default combineReducers({

show(name, props)

The show modal action creator.


  • name(String) The name of modal to show.
  • props(Object) Props pass to your modal.


The hide modal action creator.


  • name(String) The name of modal to hide.



You can’t perform that action at this time.