kayt0-mymodal
v1.1.9
Published
A simple react component library to display modals
Downloads
6
Maintainers
Readme
Kayt0-MyPopup
It's a simple animated popup library that will allow you to add a mymodal and then put anything you want inside the modal. There is also a close button.
Installation
Install my-project with npm
npm install --save kayt0-mymodal
npm install --save framer-motion
npm install
Install my-project with yarn
yarn add kayt0-mymodal
yarn add framer-motion
yarn
Usage
//import useCycle from framer-motion to add the popup's display/hide statements
import { useCycle } from "framer-motion";
//import MyModal from kayt0-mymodal to add the the popup
import { MyModal } from "kayt0-mymodal";
export default function NewEmployee() {
// initialise the popup's display/hide statements
const [isPopupOpen, TogglePopup] = useCycle(false, true);
return (
<>
{/* Add a button and trigger the TogglePopup Statement on Click */}
<Form onClick={TogglePopup} />
{/* Add the MyModal component and specify all the props the popup needs */}
<MyModal
// The state to trigger the modal when shoud be open
trigger={isPopupOpen}
// The state change the modal's state
onClose={TogglePopup}
>
{/* Then pass in child prop the content you want to display inside the modal */}
<h1 className="text-green">Success</h1>
<p>New employee added</p>
</MyModal>
<>
);
}