Skip to content

Commit b33923a

Browse files
PepijnSendersdiasbruno
authored andcommitted
[changed]: Updated and formatted example in README
1 parent 0847049 commit b33923a

File tree

1 file changed

+37
-37
lines changed

1 file changed

+37
-37
lines changed

Diff for: README.md

+37-37
Original file line numberDiff line numberDiff line change
@@ -45,22 +45,23 @@ import ReactDOM from 'react-dom';
4545
import Modal from 'react-modal';
4646

4747
const customStyles = {
48-
content : {
49-
top : '50%',
50-
left : '50%',
51-
right : 'auto',
52-
bottom : 'auto',
53-
marginRight : '-50%',
54-
transform : 'translate(-50%, -50%)'
55-
}
48+
content: {
49+
top: '50%',
50+
left: '50%',
51+
right: 'auto',
52+
bottom: 'auto',
53+
marginRight: '-50%',
54+
transform: 'translate(-50%, -50%)',
55+
},
5656
};
5757

5858
// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
59-
Modal.setAppElement('#yourAppElement')
59+
Modal.setAppElement('#yourAppElement');
60+
61+
function App() {
62+
let subtitle;
63+
const [modalIsOpen, setIsOpen] = React.useState(false);
6064

61-
function App(){
62-
var subtitle;
63-
const [modalIsOpen,setIsOpen] = React.useState(false);
6465
function openModal() {
6566
setIsOpen(true);
6667
}
@@ -70,34 +71,33 @@ function App(){
7071
subtitle.style.color = '#f00';
7172
}
7273

73-
function closeModal(){
74+
function closeModal() {
7475
setIsOpen(false);
7576
}
7677

77-
return (
78-
<div>
79-
<button onClick={openModal}>Open Modal</button>
80-
<Modal
81-
isOpen={modalIsOpen}
82-
onAfterOpen={afterOpenModal}
83-
onRequestClose={closeModal}
84-
style={customStyles}
85-
contentLabel="Example Modal"
86-
>
87-
88-
<h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
89-
<button onClick={closeModal}>close</button>
90-
<div>I am a modal</div>
91-
<form>
92-
<input />
93-
<button>tab navigation</button>
94-
<button>stays</button>
95-
<button>inside</button>
96-
<button>the modal</button>
97-
</form>
98-
</Modal>
99-
</div>
100-
);
78+
return (
79+
<div>
80+
<button onClick={openModal}>Open Modal</button>
81+
<Modal
82+
isOpen={modalIsOpen}
83+
onAfterOpen={afterOpenModal}
84+
onRequestClose={closeModal}
85+
style={customStyles}
86+
contentLabel="Example Modal"
87+
>
88+
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
89+
<button onClick={closeModal}>close</button>
90+
<div>I am a modal</div>
91+
<form>
92+
<input />
93+
<button>tab navigation</button>
94+
<button>stays</button>
95+
<button>inside</button>
96+
<button>the modal</button>
97+
</form>
98+
</Modal>
99+
</div>
100+
);
101101
}
102102

103103
ReactDOM.render(<App />, appElement);

0 commit comments

Comments
 (0)