Skip to content

Commit

Permalink
[Chore] Update README (example with React Hooks).
Browse files Browse the repository at this point in the history
  • Loading branch information
nagayev authored and diasbruno committed Nov 18, 2019
1 parent cec8833 commit 98dd5be
Showing 1 changed file with 15 additions and 27 deletions.
42 changes: 15 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,46 +53,35 @@ const customStyles = {
// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

class App extends React.Component {
constructor() {
super();

this.state = {
modalIsOpen: false
};

this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
function App(){
var subtitle;
const [modalIsOpen,setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}

openModal() {
this.setState({modalIsOpen: true});
}

afterOpenModal() {
function afterOpenModal() {
// references are now sync'd and can be accessed.
this.subtitle.style.color = '#f00';
subtitle.style.color = '#f00';
}

closeModal() {
this.setState({modalIsOpen: false});
function closeModal(){
setIsOpen(false);
}

render() {
return (
<div>
<button onClick={this.openModal}>Open Modal</button>
<button onClick={openModal}>Open Modal</button>
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>

<h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
<button onClick={this.closeModal}>close</button>
<h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
<button onClick={closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
Expand All @@ -104,7 +93,6 @@ class App extends React.Component {
</Modal>
</div>
);
}
}

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

0 comments on commit 98dd5be

Please sign in to comment.