redux-reactstrap-modal
A Higher Order Component using react-redux to keep dialog state in a Redux store
Inspired from suciuvlad/redux-dialog
Example
Clone this repo then run:
npm installnpm start
Install
The easiest way to use redux-reactstrap-modal is to install it from NPM and include it in your own React build process
NPM:
npm install --save redux-reactstrap-modal
YARN:
yarn add redux-reactstrap-modal
Usage
The first step is to combine the redux-reactstrap-modal reducer with your own application reducers
Step 1
;;const reducers = // Other reducers here dialogReducer: dialogReducerconst reducer = ;const store = ;
Remark : dialogReducer
is the name used by the internal Wrapper to access to store, it cannot by renamed.
Step 2
Decorate your component with reduxDialog.
;; const BasicDialog = <div> My awesome modalbox! </div> const Dialog = BasicDialog;
Step 3
Use redux-reactstrap-modal's actions to show and hide the dialog
;const MyComponent = <a href="#" onClick= ></a>
Modal Props
The reduxDialog method only requires the name property to work. The rest of the optional properties can be Any valid reactstraps's modal options.
name
: string [Required]
A unique id for this dialog
data
: object [Optional]
A data object that will be passed to the modal as a property. Usefull to send data from the modal parent
Modal Content Props
The content wrapped inside the modal receive the additional props :
toggle
: function ()=>()
This will toggle the dialog. Can be used for buttons like Dismiss, Cancel, Close, ...
Example
see the file : https://github.com/anis-campos/redux-reactstrap-modal/blob/develop/examples/index.js
Tests
Work in progress
Change Log
v2
What's new:
- SSR is supported
- Latest version of react, redux and reactstrap ( may 2019 )
Fixes
- Fix issue 5 : Incompatible with SSR
- fixing travis CI
- migrating from Karma to Jest
v1.1.3
- Fix issue 6 : Incompatible with react-redux > 6
- need to pass
store
to create the redux wrapper
v1.1.2
- Fix issue 4 : Uncaught TypeError: state.merge is not a function