Skip to content

Commit 162ed4c

Browse files
committed
readme update
1 parent a5012d9 commit 162ed4c

File tree

1 file changed

+11
-3
lines changed

1 file changed

+11
-3
lines changed

README.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,15 @@
44

55
`npm install simple-react-modal`
66

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
816

917
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!
1018

@@ -32,7 +40,7 @@ export default class App extends React.Component{
3240
<div>
3341
<a onClick={this.show.bind(this)}>Open Modal</a>
3442
<Modal
35-
className="test-class" //this will completely overwrite the default css
43+
className="test-class" //this will completely overwrite the default css
3644
closeOnOuterClick={true}
3745
show={this.state.show}
3846
onClose={this.close.bind(this)}>
@@ -54,7 +62,7 @@ export default class App extends React.Component{
5462
- `onClose`: when the modal is sending the close event (only happens is `closeOnOuterClick` is true)
5563
- `className`: this will allow you to completely change the default css located in the component.
5664

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.
5866

5967
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.
6068
Customizing the style is easy, to target the actual content area it will be `.your-class div`.

0 commit comments

Comments
 (0)