Popup Modal
Popup Modal is a Simple React component that allows you to create a popup modal with your own custom UI content. It wraps around your content and gives you full control over it.
Installing Popup Modal
To install Popup Modal, run the following command:
npm i @dannybee/popupmodal
# or
yarn add @dannybee/popupmodal
Using Popup Modal
To use Popup Modal, import it into your project and wrap it around your content. You can then use the handleClose
prop to hide the modal.
import React, { useState } from 'react';
import { PopupModal } from '@dannybee/popupmodal';
const App = () => {
const [showModal, setShowModal] = useState(false);
const closeModal = () => {
console.log('close modal');
setShowModal(false);
};
return (
<div>
<button onClick={() => setShowModal()}>Show Modal</button>
{showModal && (
<PopupModal handleClose={closeModal}>
<h2>Modal</h2>
<div>
<p>My Modal content</p>
</div>
</PopupModal>
)}
</div>
);
};
To Do
- [ ] Add more props
- [ ] Add more tests
- [ ] Add annimations
- [ ] Add more styling options