Skip to content

Commit

Permalink
[changed]: Updated and formatted example in README
Browse files Browse the repository at this point in the history
  • Loading branch information
PepijnSenders authored and diasbruno committed Jun 8, 2021
1 parent 0847049 commit b33923a
Showing 1 changed file with 37 additions and 37 deletions.
74 changes: 37 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,22 +45,23 @@ import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
};

// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')
Modal.setAppElement('#yourAppElement');

function App() {
let subtitle;
const [modalIsOpen, setIsOpen] = React.useState(false);

function App(){
var subtitle;
const [modalIsOpen,setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
Expand All @@ -70,34 +71,33 @@ function App(){
subtitle.style.color = '#f00';
}

function closeModal(){
function closeModal() {
setIsOpen(false);
}

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

<h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
<button onClick={closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
return (
<div>
<button onClick={openModal}>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
<button onClick={closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
}

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

0 comments on commit b33923a

Please sign in to comment.