Skip to content

Commit 74cac80

Browse files
author
Maxim Yaskevich
committed
Added README
1 parent b98ee28 commit 74cac80

File tree

2 files changed

+93
-0
lines changed

2 files changed

+93
-0
lines changed

README.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# React Redux Modal Provider
2+
3+
`react-redux-modal-provider` controls the state of your React modal components using Redux.
4+
5+
## Installation
6+
```
7+
npm i --save react-redux-modal-provider
8+
```
9+
10+
## Usage
11+
12+
1. Add `<ModalProvider>` to your root component.
13+
14+
```jsx
15+
import ModalProvider from 'react-redux-modal-provider';
16+
17+
export default render(
18+
<Provider store={store}>
19+
<div>
20+
<App />
21+
<ModalProvider />
22+
</div>
23+
</Provider>,
24+
document.getElementById('app')
25+
);
26+
```
27+
28+
2. Plug in Modal Provider reducer.
29+
30+
```jsx
31+
import { reducer as modalProvider } from 'react-redux-modal-provider';
32+
33+
export default combineReducers({
34+
modalProvider,
35+
});
36+
```
37+
38+
3. Add modal creation code.
39+
40+
```jsx
41+
import { connect } from 'react-redux';
42+
import { showModal } from 'react-redux-modal-provider';
43+
import MyModal from './myModal';
44+
45+
const App = (props) => (
46+
<div>
47+
<p>
48+
Hello world
49+
</p>
50+
<button
51+
type="button"
52+
onClick={() => props.showModal(MyModal, { message: 'Hello' })}>
53+
Present modal
54+
</button>
55+
</div>
56+
);
57+
58+
export default connect(null, { showModal })(App);
59+
```
60+
61+
4. Handle modal closing.
62+
63+
```jsx
64+
// myModal.jsx
65+
import { Modal } from 'react-bootstrap';
66+
67+
export default (props) => (
68+
<Modal show={props.show}>
69+
<Modal.Body>
70+
{props.message}
71+
</Modal.Body>
72+
73+
<Modal.Footer>
74+
<Button onClick={props.hideModal}>Ok</Button>
75+
</Modal.Footer>
76+
</Modal>
77+
);
78+
```
79+
80+
`show` and `hideModal` props are passed in automatically.
81+
82+
## How is it different from [`redux-modal`](https://github.com/yesmeck/redux-modal)?
83+
84+
1. You don't have to think about where your modal component should fit into component tree, because it doesn't really matter where to render a modal.
85+
86+
2. No need to `connect()` your modal component to Redux, unless you want it to be able to create create other modals itself.
87+
88+
## Acknowledgements
89+
Thanks [@yesmeck](https://github.com/yesmeck), author of [`redux-modal`](https://github.com/yesmeck/redux-modal), for webpack config I borrowed.
90+
91+
## License
92+
MIT

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"scripts": {
77
"lint": "esw src example/src --fix",
88
"build": "babel src --out-dir lib",
9+
"prepublish": "npm run build",
910
"test": "echo \"Error: no test specified\" && exit 1"
1011
},
1112
"files": [

0 commit comments

Comments
 (0)