0.0.5 • Published 1 year ago
react-yt-modal v0.0.5
Yeopto's Modal Libarary
This is a library that enables you to use a modal that appears from the bottom. You can close the modal by clicking on the background, and you can also close it by pressing the 'ESC' key.
Installation
npm
npm install react-yt-modal
yarn
yarn add react-yt-modal
Props
isOpen
- A status value of type boolean indicating whether the modal is open or closed.
- This modal library displays the modal when isOpen is true, and does not display it when it is false
closeModal
- A custom function that closes the modal.
- To close the modal in this modal library, isOpen needs to be set to false since the modal is displayed when isOpen is true. So, Should contain the logic to change
isOpen
tofalse
in this function.
portalNode
- Pass the DOM node where the modal will be rendered (optional).
User Guide
Import Library
import Modal from "react-yt-modal";
Use Library
<Modal
isOpen={/* Modal State */}
closeModal={/* Close Modal Function */}
portalNode={/* DOM node(optional) */}
>
{/* Modal Contents(ReactNode) */}
</Modal>
Using Example Code
import Modal from "react-yt-modal";
import { useState } from "react";
import styled from "styled-components";
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
const root = document.querySelector("#root");
return (
<Container>
<Button onClick={openModal}>Open Modal</Button>
<Modal isOpen={isModalOpen} closeModal={closeModal} portalNode={root}>
<Caption>
Hi there, I'm a modal that you can open and close. Now you can close
me by clicking on the close button on my window.
</Caption>
<Button onClick={closeModal}>Close Modal</Button>
</Modal>
</Container>
);
}
export default App;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
width: 100vw;
height: 100vh;
`;
const Button = styled.button`
color: white;
font-weight: bold;
font-size: 15px;
border: none;
border-radius: 10px;
width: 130px;
height: 50px;
background-color: #14428d;
padding: 10px;
cursor: pointer;
`;
const Caption = styled.p`
text-align: justify;
margin-bottom: 20px;
`;
Development Environment
- React(Create-React-App)
- TypeScript
- Styled-Components
Browser Support
Version
- 0.0.4 (latest)