redux-dialog-extended
A Higher Order Component using react-redux to keep dialog state in a Redux store.
This package was forked from redux-dialog.
Using in your project
The easiest way to use redux-dialog-extended is to install it from NPM and include it in your own React build process
npm install --save redux-dialog-extended
or use yarn
yarn add --save redux-dialog-extended
Usage
The first step is to combine the redux-dialog-extended reducer with your own application reducers
Step 1
;;const reducers = // Other reducers here dialogs: dialogReducerconst reducer = ;const store = ;
Step 2
Decorate your component with reduxDialog.
; const BasicDialog = <div> My awesome modalbox! </div> const Dialog = BasicDialog;
Step 3
Use redux-dialog-extended's actions to show and hide the dialog
;const MyComponent = <a href="#" onClick= ></a>
Options
The reduxDialog method only requires the name property to work. The rest of the optional properties can be Any valid react-modal options.
name
: string
A unique id for this dialog
Passing a payload to the modal
When dispatching the action to open the dialog, adding a payload as the second parameter to openDialog
will be available within the dialog as the payload
property.
; const BasicDialog = <div> payloadaccountName </div> <div> My awesome modalbox! </div>
Working on the source code
Clone this repo then run:
yarn installyarn start
Then open http://localhost:8080 to see a working example.
Building a release
yarn build
should do the trick.
Tests
Work in progress