react-redux-modals (demo)

React-Redux modals for drop-in modal support with components and auto-stacking.

Features

• Use your own style (or copy the example css)
• Use your own components as modals
• Modals on top of modals (auto-layering/stacking)
• Custom hooks/props for passing data
• Separate DOM tree
• Custom z-indexing
• Control over individual modal closing methods
• Fade-in transition option

Install

npm install --save react-redux-modals

Usage

Check out the demo in the example folder.

Step 1. Call ModalRoot with your store and add the resulting component to your root component.

Step 2. Pass in your modal components as a prop.

// ./index.js

import { ModalRoot } from 'react-redux-modals';
import * as modalComponents from './modal_components';

const ModalRootWithStore = ModalRoot(store);

const Root = () => (
  <div>
    <Provider store={store}>
      <App />
    </Provider>
    <ModalRootWithStore modalComponents={modalComponents} />
  </div>
);

// ./modal_components.js

import Signup from './components/modal/signup';
import Delete from './components/modals/delete';
import Terms from './components/modals/terms';

export const MODAL_SIGNUP = Signup;
export const MODAL_DELETE = Delete;
export const MODAL_TERMS = Terms;

Step 3. Add the modals reducer.

// ./reducers/index.js

import { reducer as modals } from 'react-redux-modals';

export default combineReducers({
  modals,
});

Step 4. Create your modal by using the Modal wrapper component. Add your own style.

// ./components/modals/delete.js

import Modal, { actions } from 'react-redux-modals';
import './modal.css';

class ModalDelete extends Component {

  render() {
    return (
      <Modal
        config={this.props.modalConfig} // required
        handleEscape={() => this.props.hideModal('MODAL_DELETE')} 
      >

        <div className="modal-body">
          <p>{`Are you sure you want to delete ${this.props.title}?`}</p>
          <button onClick={this.props.confirmDelete}>Yes</button>
          <button onClick={() => this.props.hideModal('MODAL_DELETE')}>No</button>
        </div>

      </Modal>
    );
  }
}

export default connect(
  null,
  { hideModal: actions.hideModal },
)(ModalDelete);

Step 5. Call your modal (with optional props).

// ./components/files.js

import { actions } from 'react-redux-modals';

class Files extends Component {

  render() {
    return (
      <div>
        <h3>My Files</h3>
        <div className="file">
          <label>{`File: ${filename}`}</label>
          <button onClick={() => this.props.showModal('MODAL_DELETE', {
            title: filename,
            confirmDelete: () => this.deleteFile(id)
          })}>
            delete
          </button>
        </div>
      </div>
    );
  }
}

export default connect(
  null,
  { showModal: actions.showModal },
)(Files);

Components

Component: Modal

Props:

| Property | Type | Required | Default | Description | |:--------------|:--------------|:--------------|:--------------|:--------------| | config | object | Required | undefined | Pass this.props.modalConfig (auto-injected). | | handleEscape | function | Optional | undefined | Fires when clicking outside of modal. | | animate | boolean | Optional | false | Adds a class of animate to the modal. | | fadeIn | boolean | Optional | true | Uses the provided fadeIn animation if animate is true. |

Component: ModalRootWithStore

Props:

| Property | Type | Required | Default | Description | |:--------------|:--------------|:--------------|:--------------|:--------------| | modalComponents | object | Required | undefined | Pass a module of your exported modal components. | | config | object | Optional | undefined | Optionally pass a starting z-index. |

Example of passing a starting z-index (defaults to 1000).

// ./index.js

<ModalRootWithStore
  modalComponents={modalComponents}
  config={{ zIndex: 5 }}
/>

Action Creators

Available action creators.

• showModal(name, props)
• hideModal(name)
• resetModals()

License

MIT