1.0.1 • Public • Published


##react-redux-modal demo

Implementation Guide

1. Installation

npm install --save react-redux-modal

2. Add the react-redux-modal css link to your app
<link href="http://diegoddox.github.io/react-redux-modal/0.5/react-redux-modal.min.css" rel="stylesheet" type="text/css">
3. The third thing you need to do is to add the react-redux-modal reducer to Redux.
import {createStore, combineReducers} from 'redux'
import {reducer as modalReducer} from 'react-redux-modal'
const reducers = {
  // ... other reducers ...
  modals: modalReducer // <- Mounted at modals.
const reducer = combineReducers(reducers)
const store = createStore(reducer)
NOTE: The default mount point for react-redux-modal is modals.
4. Add the react-redux-modal React component to the root of your app
import {Provider}  from 'react-redux'
import ReduxModal from 'react-redux-modal'

<Provider store={store}>
    ... other things like router ...
    <ReduxModal />
5. Add the react-redux-modal modal emitter

The modal method use eventemitter3 to dispatch the actions

import React, {Component}  from 'react'
import {modal} from 'react-redux-modal' // The modal emitter

Create a component that will be injected in the modal

class myModalComopnent extends Component {
  constructor(props) {
    console.log('## MODAL DATA AND PROPS:', this.props);

  removeThisModal() {
  render() {
    return (
        <p>this is my modal</p>
          close this modal
export class YourComponent extends Component {
  constructor(props) {

  addModal() {
    modal.add(myModalComopnent, {
      title: 'This is my modal',
      size: 'medium', // large, medium or small,
      closeOnOutsideClick: false // (optional) Switch to true if you want to close the modal by clicking outside of it,
      hideTitleBar: false // (optional) Switch to true if do not want the default title bar and close button,
      hideCloseButton: false // (optional) if you don't wanna show the top right close button
      //.. all what you put in here you will get access in the modal props ;)
  render() {
    return <button onClick={this.addModal.bind(this)}>Add modal</button>;

The modal add method takes two arguments, first a react component and a object that will specify the modal title, size and data

Run a local demo

git clone https://github.com/diegoddox/react-redux-modal.git
cd react-redux-modal
npm install
npm start

open your browser at http://localhost:3001


create test.

Package Sidebar


npm i @interpals/react-redux-modal

Weekly Downloads






Last publish


  • alupher
  • ovr