npm-react-ts-modal

npm-react-ts-modal is a lightweight, customizable modal component built with React. It's designed for easy integration into any React project, providing a simple API for displaying modals, dialogs, or any pop-up elements. With support for TypeScript, it ensures type safety and seamless integration into TypeScript projects.

Features

• Lightweight & Efficient: Minimally impacts your bundle size.
• Easy to Use: Simplified API for quick integration.
• Customizable: Style and behavior can be easily customized.
• TypeScript Support: Comes with TypeScript type definitions for a better development experience.

Installation

You can install npm-react-ts-modal using npm:

1npm install npm-react-ts-modal

Installation

1npm update npm-react-ts-modal

import

1import Modal from "npm-react-ts-modal";

usage

Here's a quick example to get you started:

1import React, { useState } from "react";
2import Modal from "npm-react-ts-modal";
3
4function App() {
5  const [isOpen, setIsOpen] = useState(false);
6
7  return (
8    <div>
9      <button onClick={() => setIsOpen(true)}>Open Modal</button>
10      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
11        <p>Your modal content here.</p>
12      </Modal>
13    </div>
14  );
15}
16
17export default App;

CSS

I chose not to add any css, so that anyone can easily customize their modal, without needing to override already written css.

Here is the component and its css classes:

1return (
2  <div className="modal-backdrop" onClick={onClose}>
3    <div className="modal" onClick={(e) => e.stopPropagation()}>
4      <button className="modal-close" onClick={onClose}>
5        &times;
6      </button>
7      {children}
8    </div>
9  </div>
10);

Customizable CSS elements

• modal-backdrop: The backdrop of the modal.
• modal: The modal itself.
• children: It could be a <p>, a title like <h2>, or more. It's the content of the modal.
• modal-close: The close button inside the modal.

Example

1.modal-backdrop {
2  position: fixed;
3  top: 0;
4  left: 0;
5  width: 100%;
6  height: 100%;
7  background-color: rgba(0, 0, 0, 0.5);
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  z-index: 1000;
12}
13
14.modal {
15  background-color: white;
16  padding: 15px 30px;
17  border-radius: 8px;
18  position: relative;
19  max-width: 500px;
20  width: 100%;
21  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
22  z-index: 1001;
23}
24.modal h4 {
25  text-align: start;
26  font-size: 18px;
27  font-weight: 700;
28}
29
30.modal-close {
31  position: absolute;
32  top: -12px;
33  right: -12px;
34  width: 28px;
35  height: 28px;
36  border: none;
37  background: black;
38  border-radius: 50%;
39  font-size: 1.5rem;
40  cursor: pointer;
41  color: white;
42}

API Reference

Modal Props

• isOpen: Boolean indicating if the modal is open or closed.
• onClose: Function to be called when the modal needs to be closed.
• children: Content to be displayed within the modal.

Contributing

Contributions are always welcome! If you're interested in helping improve npm-react-ts-modal, please feel free to submit pull requests or open issues to discuss potential features or fixes.