A modal created using react for react
Before you begin, ensure you have met the following requirements:
- You have installed React with a version that supports hooks
npm install --save @sbodi/react-modal
<Modal
displayModal={displayModal}
closeModalFunction={() => setDisplayModal(false)}
headerContent={'Header'}
mainContent={<div>Testing this</div>}
footerContent={<button>Button</button>}
/>
import React, { useState } from 'react';
import Modal from '@sbodi/react-modal';
function App() {
const [displayModal, setDisplayModal] = useState(false);
return (
<div>
<button onClick={() => setDisplayModal(true)}>Open modal</button>
<Modal
headerContent={'Header content'}
mainContent={<textarea rows='8' placeholder={'Enter some text'} />}
footerContent={
<React.Fragment>
<button
onClick={() => setDisplayModal(false)}
>Cancel</button>
<button
onClick={() => setDisplayModal(false)}
>Confirm</button>
</React.Fragment>
}
displayModal={displayModal}
closeModalFunction={() => setDisplayModal(false)}
/>
</div>
);
}
Thanks to the following people who have contributed to this project:
MIT © sbodi10