@dannybee/popup-modal
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

Popup Modal

NPM Downloads

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

Package Sidebar

Install

npm i @dannybee/popup-modal

Weekly Downloads

1

Version

0.1.3

License

MIT

Unpacked Size

18 kB

Total Files

11

Last publish

Collaborators

  • dannybee