redux-dialog
A Higher Order Component using react-redux to keep dialog state in a Redux store.
Using in your project
The easiest way to use redux-dialog is to install it from NPM and include it in your own React build process
npm install --save react react-dom react-modal redux react-redux redux-dialog
or use yarn
yarn add --save react react-dom react-modal redux react-redux redux-dialog
Usage
The first step is to combine the redux-dialog reducer with your own application reducers
Step 1
;;const reducers = // Other reducers here dialogReducer;const 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's actions to show and hide the dialog
;const MyComponent = <a href="#" onClick= />;
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
yarn run test