avtyul/redux-popup

redux-popup

Redux wrapper for modals

Uses Dialog from react-toolbox

Usage

As component

import {ReduxPopup} from 'redux-popup';

class Popup extends Component {
    
    render() {
        return (
            <div>
                <h1>My popup</h1>
            </div>
        )
    }
    
}

class OtherComponentOrContainer extends Component {
    render() {
            return (
                <ReduxPopup name="test" component={Popup} popupType="storeKey"/>
            )
        }
}

As function

import {createReduxPopup} from 'redux-popup';

class Popup extends Component {
    
    render() {
        return (
            <div>
                <h1>My popup</h1>
            </div>
        )
    }
    
}

export default createReduxPopup({
    name: 'test',
    modal: Dialog,
    popupType: 'storeKey',
})(Popup);

Configuring everything

popupType property defines store (reducer) key default value is 'popup'

    <ReduxPopup name="test" component={Popup} popupType="storeKey"/>

to attach reducer use makePopupReducer

    import {combineReducers} from 'redux';
    import {makePopupReducer} from 'redux-popup';

    export default combineReducers({
        storeKey: makePopupReducer('storeKey'),
    });

to dispatch actions use actionDecorator

    import {closeAllPopups, actionDecorator} from 'redux-popup';

    store.dispatch(actionDecorator('storeKey')(closeAllPopups());