Skip to content
A middleware, reducer and actions for manipulating modal windows using Redux.
TypeScript JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Fixed modals status field Sep 27, 2017
src chore: refactor code (#24) Jan 9, 2019
tests
.gitignore Start adding example Jun 11, 2017
.npmignore Added deploy script Sep 28, 2017
LICENSE Initial commit Oct 8, 2016
README.md Added link to gh-pages. Sep 27, 2017
commitlint.config.js chore: add commitlint Jan 3, 2019
package-lock.json
package.json chore: refactor code (#24) Jan 9, 2019
tsconfig.json chore: refactor code (#24) Jan 9, 2019
tslint.json chore: support TypeScript (#18) Jan 4, 2019

README.md

Synopsis

A middleware, reducer and actions for manipulating modal windows.
The library provides only these things. If you want to see modal window, you could use react-modal.
See working example at gh-pages.

Code Example

Adding modals' reducer:

import { combineReducers } from 'redux';
import { modalsReducer } from 'redux-promising-modals';

export default combineReducers({
    /* your's reducers */
    modals: modalsReducer
});

Creating a store:

import { createStore, applyMiddleware } from 'redux';
import { modalsMiddleware } from 'redux-promising-modals';
import yourReducer from 'yourReducerDirectory';

const store = createStore(yourReducer, applyMiddleware(modalsMiddleware));

Show single modal:

import { pushModalWindow } from 'redux-promising-modals';
// ToDo: bind pushModalWindow to dispatch

pushModalWindow('EDIT_FILE_DIALOG', {fileName: 'my_file.txt'})
  .then(result => { /* do something with the result */ });

Show series of modals

import { pushModalWindow } from 'redux-promising-modals';
// ToDo: bind pushModalWindow to dispatch

const promisesArray = pushModalWindow(
    ['EDIT_FILE_DIALOG', 'REMOVE_FILE_DIALOG'],
    [{fileName: 'my_file.txt'}, {fileName: 'old_file.txt', _createdOn: 1480021259507}]
);

Promise.all(promisesArray).then(() => { /* all promises are resolved (each window was closed) */ });

Close current modal and return result

import { popModalWindow } from 'redux-promising-modals';
/* ToDo: bind popModalWindow to dispatch */

popModalWindow({newFileName: 'your_file.txt'});

Motivation

For example:
You need to show a modal window to a user. The user manipulates with the content of the window and then closes it. You want to see the result of these manipulation.

Installation

npm i --save redux-promising-modals

API Reference

Actions' types

PUSH_MODAL_WINDOW,
INSERT_MODAL_WINDOW,
POP_MODAL_WINDOW,
CLEAR_MODAL_WINDOWS

You can import theses types from library and handle them separately.

Middleware

modalsMiddleware

If the type of action passing through it is PUSH_MODAL_WINDOW or INSERT_MODAL_WINDOW you can expect that a Promise will be returned.
If the type is SHIFT_MODAL_WINDOW or POP_MODAL_WINDOW the Promise will be resolved and the result will be granted.
CLEAR_MODAL_WINDOWS resolves all Promises.

Actions

pushModalWindow(modalTypes, modalProps) - adds modal of type modalType (expects a String type but this is not necessary) with modalProps (could be anything) in the end of modals array. modalTypes and modalProps can be either an array or a single element (see Code Example).
insertModalWindow(modalTypes, modalProps) - adds a modal in the beginning of modals array.
popModalWindow(values) - removes the last window from modals array.
shiftModalWindow(values) - remove the first (current) window from modals array.
clearModalWindows() - clears modals array.
nextModalWindow() - replaces current window by the next.
prevModalWindow() - replaces current window by the previous one.

Reducer

modalsReducer - a reducer for modals (keep modals types and props in an array).

License

MIT

You can’t perform that action at this time.