Home

Awesome

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

Installation

npm i --save redux-modal

API

connectModal(config)

Connect a modal component to redux store.

Arguments

Returns

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

Examples

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)

reducer

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

Example

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

export default combineReducers({
  ...yourOtherReducers,
  modal
})

show(name, props) | show<T>(name, props: T)

The show modal action creator.

Arguments

Example

import { MyModalProps } from '...'

show<MyModalProps>('modalName', {prop1: 'example'})

hide(name)

The hide modal action creator.

Arguments

License

MIT