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 to false 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)