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
  • ToastMain
• 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.
• Toast Notifications: A simple and customizable toast notification system.
• Customizable Styling: Easily adapt the appearance of modals and toast notifications 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>} (option 1)
          closeOnOverlayClick={true}
          bodyColor="#fff"
        >
          <div>Your modal content goes here!</div> {/*(option 2) */}
        </MainModal>
      )}
    </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" // (optional)
          cancelText="No" // (optional)
          confirmBtnColor="#16792dd5" // (optional)
          cancelBtnColor="#da2739d3" // (optional)
          messageColor="#333" // (optional)
        />
      )}
    </div>
  );
}

export default App;

ToastMain

The ToastMain component provides a customizable toast notification system that allows you to display temporary messages for the user.

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

function App() {
  const [showToast, setShowToast] = useState(false);

  return (
    <div>
      <button onClick={() => setShowToast(true)}>Show Toast</button>

      {showToast && (
        <ToastMain
          setToast={setShowToast}
          message="This is a success message!"
          duration={3000} // (optional)
          type="success" // (optional)
          position="bottom-right" // (optional)
          showCloseButton={true} // (optional)
          showProgressBar={true} // (optional)
        />
      )}
    </div>
  );
}

export default App;

Props

MainModal

ConfirmationModal

ToastMain

Customization

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

/* 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.