React Modals Kit

A powerful and customizable modal component library for React applications. This library provides multiple modal types, including general-purpose modals and confirmation modals, to enhance your user interface effortlessly.

Table of Contents

• Features
• Installation
• Usage
  • MainModal
  • ConfirmationModal
• Props
• Customization
• Contributing
• License

Features

• Main Modal: A flexible modal for displaying content with customizable options.
• Confirmation Modal: A modal designed for confirmation actions like deletion or form submission.
• Customizable Styling: Easily adapt the appearance of modals to fit your design.
• Overlay Click Handling: Configurable option to close modals when clicking outside.
• React Portal Support: Leverages React's createPortal for rendering outside the component hierarchy.
• Accessibility Enhancements: Built-in focus management and keyboard navigation.
• Lightweight: Minimal footprint with no dependencies other than React.

Installation

To install the package, run:

npm install react-modals-kit

Alternatively, using Yarn:

yarn add react-modals-kit

Usage

MainModal

The MainModal component is a versatile modal that can display messages, forms, or any other content within a modal interface.

import React, { useState } from "react";
import { MainModal } from "react-modals-kit";

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

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>

      {isModalOpen && (
        <MainModal
          setModel={setIsModalOpen}
          content={<div>Your modal content goes here!</div>}
          closeOnOverlayClick={true}
          bodyColor="#fff"
        />
      )}
    </div>
  );
}

export default App;

ConfirmationModal

The ConfirmationModal component is used to handle user confirmations, such as deletions or approvals.

import React, { useState } from "react";
import { ConfirmationModal } from "react-modals-kit";

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

  const confirmAction = () => {
    console.log("Action confirmed!");
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>
        Open Confirmation Modal
      </button>

      {isModalOpen && (
        <ConfirmationModal
          setModel={setIsModalOpen}
          onConfirm={confirmAction}
          message="Are you sure you want to proceed?"
          confirmText="Yes"
          cancelText="No"
          confirmBtnColor="#4CAF50"
          cancelBtnColor="#F44336"
          messageColor="#333"
        />
      )}
    </div>
  );
}

export default App;

Props

MainModal

ConfirmationModal

Customization

You can customize modal styles by modifying CSS in MainModal.module.css and ConfirmationModal.module.css. Alternatively, use inline styles via props like bodyColor and messageColor.

/* Example: Customizing modal styles */
.container {
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 20px;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.body {
  border-radius: 10px;
}

Contributing

We welcome contributions! If you'd like to improve the library or introduce new features, feel free to fork the repository and submit a pull request.

Contribution Steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature-branch)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to your branch (git push origin feature-branch)
5. Open a pull request

License

This project is licensed under the MIT License. See the LICENSE file for details.