redux-popper

🎈 redux state management for popup components

Installation

npm install redux-popper --save-dev

Setup

Combine the redux-popper reducer with your own application reducers

import { reducer as popperReducer } from 'redux-popper';
const reducers = combineReducers({
    /* ... */
    poppers: popperReducer
})

Usage

Here's an example using material-ui/Dialog as the integrating component

import reduxPopper from 'redux-popper'

@reduxPopper('coolDialog')
class CoolDialog extends Component {
    render() {        
        const {isOpen, data, close, open, assign} = this.props
        const someData = {comparedTo:'a cucumber'}
        return (
            <div>
                <button onClick={()=> {assign(someData);open()}}>
                    Open Dialog
                </button>

                <Dialog open={isOpen} onRequestClose={close} >
                    Cool as...{data.comparedTo}
                </Dialog>
            </div>
        )
    }
}

// and alternatively, without the '@' decorator syntax:
CoolDialog = reduxPopper('coolDialog',CoolDialog)

To open / close / assign a registered popper from outside this component, simply call dispatch with the corresponding built-in action creator:

import {openPopper, closePopper, assignPopper} from 'redux-popper'

/* ... */

dispatch(openPopper('coolDialog'))
dispatch(closePopper('coolDialog'))
dispatch(assignPopper('coolDialog',{comparedTo:'a cup of cold-brew'}))

State Shape

Here's the state resulting from the example above:

//how the state looks
{
    /* ... */
    poppers: {
        'coolDialog': {
            isOpen: true, /* bool: (true|false) */
            data: {comparedTo:'a cucumber'}
        }
    }
}

Dev Dependencies

• babel-cli: Babel command line.
• babel-core: Babel compiler core.
• babel-eslint: Custom parser for ESLint
• babel-preset-es2015: Babel preset for all es2015 plugins.
• babel-preset-react: Babel preset for all React plugins.
• babel-preset-stage-0: Babel preset for stage 0 plugins
• babel-register: babel require hook
• eslint: An AST-based pattern checker for JavaScript.
• eslint-config-rackt: Shareable eslint config for rackt repos
• eslint-plugin-react: React specific linting rules for ESLint
• react: React is a JavaScript library for building user interfaces.
• react-dom: React package for working with the DOM.
• react-redux: Official React bindings for Redux
• redux: Predictable state container for JavaScript apps
• rimraf: A deep deletion module for node (like rm -rf)

License

ISC