A Higher Order Component using react-redux to keep dialog state in a Redux store.
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
The first step is to combine the redux-dialog reducer with your own application reducers
import { createStore, combineReducers } from "redux";
import { dialogReducer } from "redux-dialog";
const reducers = {
// Other reducers here
dialogReducer
};
const reducer = combineReducers(reducers);
const store = createStore(reducer);Decorate your component with reduxDialog.
import reduxDialog from "redux-dialog";
const BasicDialog = () => <div>My awesome modalbox!</div>;
const Dialog = reduxDialog({
name: "Sign up dialog" // unique name - you can't have two dialogs with the same name (will be used as aria-label as well)
})(BasicDialog);Use redux-dialog's actions to show and hide the dialog
import { openDialog, closeDialog } from "redux-dialog";
const MyComponent = () => (
<a href="#" onClick={() => dispatch(openDialog("Sign up dialog"))} />
);The reduxDialog method only requires the name property to work. The rest of the optional properties can be Any valid react-modal options.
A unique id for this dialog
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.
dispatch(openDialog('accountDialog', { accountName: 'My Account' }));
const BasicDialog = ({ payload }) => (
<div>
{ payload.accountName }
</div>
<div>
My awesome modalbox!
</div>
)Clone this repo then run:
yarn install
yarn startThen open http://localhost:8080 to see a working example.
yarn build should do the trick.
yarn run test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent