You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+11-3Lines changed: 11 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,15 @@
4
4
5
5
`npm install simple-react-modal`
6
6
7
-
##Example
7
+
###Simple?
8
+
9
+
~~~js
10
+
<Modal show={this.state.show}>
11
+
<div>hey, click outside of me to close me!</div>
12
+
</Modal>
13
+
~~~
14
+
15
+
##Full Example
8
16
9
17
An incredibly simple modal dialog, because after writing [this post](http://reactjsnews.com/modals-in-react/), I found none of the ones listed let you easily overwrite the css!
10
18
@@ -32,7 +40,7 @@ export default class App extends React.Component{
32
40
<div>
33
41
<a onClick={this.show.bind(this)}>Open Modal</a>
34
42
<Modal
35
-
className="test-class"//this will completely overwrite the default css
43
+
className="test-class"//this will completely overwrite the default css
36
44
closeOnOuterClick={true}
37
45
show={this.state.show}
38
46
onClose={this.close.bind(this)}>
@@ -54,7 +62,7 @@ export default class App extends React.Component{
54
62
-`onClose`: when the modal is sending the close event (only happens is `closeOnOuterClick` is true)
55
63
-`className`: this will allow you to completely change the default css located in the component.
56
64
57
-
Everything else will be merged and you're free to apply any props you want. Minimum required props would be `show` and probably a className. You can optionally pull in `modalClass` and merge any styles with it and set the style prop on the modal.
65
+
Everything else will be merged and you're free to apply any props you want. Minimum required props would be `show`. You can optionally pull in `modalClass` and merge any styles with it and set the style prop on the modal.
58
66
59
67
The big difference is that you can require the css from 'simple-react-modal/dist/modal' and easily add other classes that make it look however you like.
60
68
Customizing the style is easy, to target the actual content area it will be `.your-class div`.
0 commit comments