redux-reactstrap-modal

A Higher Order Component using react-redux to keep dialog state in a Redux store

Inspired from suciuvlad/redux-dialog

Example

Clone this repo then run:

npm install
npm start

Install

The easiest way to use redux-reactstrap-modal is to install it from NPM and include it in your own React build process

NPM:

npm install --save redux-reactstrap-modal

YARN:

yarn add redux-reactstrap-modal

Usage

The first step is to combine the redux-reactstrap-modal reducer with your own application reducers

Step 1

import {createStore, combineReducers} from 'redux';
import { dialogReducer } from 'redux-reactstrap-modal';
const reducers = {
  // Other reducers here
  dialogReducer: dialogReducer
}
const reducer = combineReducers(reducers);
const store = createStore(reducer);

Remark : dialogReducer is the name used by the internal Wrapper to access to store, it cannot by renamed.

Step 2

Decorate your component with reduxDialog.

import reduxDialog from 'redux-reactstrap-modal';

const BasicDialog = () => (
  <div>
    My awesome modalbox!
  </div>
)

const Dialog = reduxDialog({
  name: 'signupDialog' // unique name - you can't have two dialogs with the same name
})(BasicDialog);

Step 3

Use redux-reactstrap-modal's actions to show and hide the dialog

import { openDialog, closeDialog } from 'redux-reactstrap-modal';
const MyComponent = () => (
  <a href="#" onClick={() => dispatch(openDialog('signupDialog'))}></a>
)

Options

The reduxDialog method only requires the name property to work. The rest of the optional properties can be Any valid reactstraps's modal options.

name: string [Required]

A unique id for this dialog

data : object [Optional]

A data object that will be passed to the modal as a property. Usefull to send data from the modal parent

Tests

Work in progress