Chex's Modal Library 👀

It is a library that can use the modal that comes up from below. You can close the modal on background click.

Installation

npm

npm install react-chex-modal

yarn

yarn add react-chex-modal

Props

isModalOpen

A status value of type boolean indicating whether the modal is open or closed.

closeModal

• A custom function that closes the modal.
• Should contain the logic to change isModalOpen to false.

User Guide

Import Library

import ChexModal from 'react-chex-modal';

Use Library

<ChexModal isModalOpen={/* Modal State */} closeModal={/* Close Modal Function */}>
  {/* Modal Contents(ReactNode) */}
</ChexModal>

Example

import ChexModal from 'react-chex-modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <button onClick={openModal}>Open Modal</button>
      <ChexModal isModalOpen={isModalOpen} closeModal={closeModal}>
        <div>
          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.
          <button onClick={closeModal}>Close Modal</button>
        </div>
      </ChexModal>
    </>
  );
}

export default App;

Development Environment

• React(create-react-app)
• TypeScript
• styled-components

Browser Support