Skip to content

Commit 98dd5be

Browse files
nagayevdiasbruno
authored andcommitted
[Chore] Update README (example with React Hooks).
1 parent cec8833 commit 98dd5be

File tree

1 file changed

+15
-27
lines changed

1 file changed

+15
-27
lines changed

Diff for: README.md

+15-27
Original file line numberDiff line numberDiff line change
@@ -53,46 +53,35 @@ const customStyles = {
5353
// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
5454
Modal.setAppElement('#yourAppElement')
5555

56-
class App extends React.Component {
57-
constructor() {
58-
super();
59-
60-
this.state = {
61-
modalIsOpen: false
62-
};
63-
64-
this.openModal = this.openModal.bind(this);
65-
this.afterOpenModal = this.afterOpenModal.bind(this);
66-
this.closeModal = this.closeModal.bind(this);
56+
function App(){
57+
var subtitle;
58+
const [modalIsOpen,setIsOpen] = React.useState(false);
59+
function openModal() {
60+
setIsOpen(true);
6761
}
6862

69-
openModal() {
70-
this.setState({modalIsOpen: true});
71-
}
72-
73-
afterOpenModal() {
63+
function afterOpenModal() {
7464
// references are now sync'd and can be accessed.
75-
this.subtitle.style.color = '#f00';
65+
subtitle.style.color = '#f00';
7666
}
7767

78-
closeModal() {
79-
this.setState({modalIsOpen: false});
68+
function closeModal(){
69+
setIsOpen(false);
8070
}
8171

82-
render() {
8372
return (
8473
<div>
85-
<button onClick={this.openModal}>Open Modal</button>
74+
<button onClick={openModal}>Open Modal</button>
8675
<Modal
87-
isOpen={this.state.modalIsOpen}
88-
onAfterOpen={this.afterOpenModal}
89-
onRequestClose={this.closeModal}
76+
isOpen={modalIsOpen}
77+
onAfterOpen={afterOpenModal}
78+
onRequestClose={closeModal}
9079
style={customStyles}
9180
contentLabel="Example Modal"
9281
>
9382

94-
<h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
95-
<button onClick={this.closeModal}>close</button>
83+
<h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
84+
<button onClick={closeModal}>close</button>
9685
<div>I am a modal</div>
9786
<form>
9887
<input />
@@ -104,7 +93,6 @@ class App extends React.Component {
10493
</Modal>
10594
</div>
10695
);
107-
}
10896
}
10997

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

0 commit comments

Comments
 (0)