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

| Prop | Type | Default | Description | | --------------------- | -------- | ------- | ----------------------------------------------- | | setModel | func | - | Function to control modal visibility | | content | node | - | Content displayed inside the modal (option 1) | | children | node | - | Content displayed inside the modal (option 2) | | closeOnOverlayClick | bool | true | Determines if clicking outside closes the modal | | bodyColor | string | #fff | Background color of the modal body |

ConfirmationModal

| Prop | Type | Default | Description | | ----------------- | -------- | ----------- | ------------------------------------ | | setModel | func | - | Function to control modal visibility | | onConfirm | func | - | Function triggered upon confirmation | | message | string | - | Message displayed inside the modal | | confirmText | string | Yes | Label for the confirm button | | cancelText | string | No | Label for the cancel button | | confirmBtnColor | string | #16792dd5 | Color of the confirm button | | cancelBtnColor | string | #da2739d3 | Color of the cancel button | | messageColor | string | #000 | Text color of the message |

ToastMain

| Prop | Type | Default | Description | | ----------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------- | | setToast | func | - | Function to control toast visibility | | message | string | - | Message displayed in the toast | | duration | number | 3000 | Duration for which the toast will be visible (in ms) | | type | string | default | Type of toast notification (default, success, error, warning, info) | | position | string | top-right | Position of the toast notification (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center) | | showCloseButton | bool | false | Determines if a close button should be shown | | showProgressBar | bool | false | Determines if a progress bar should be shown | | pauseOnHover | bool | false | Determines if the toast should pause on hover | | backgroundColor | string | #333 | Background color of the toast | | textColor | string | #fff | Text color of the toast | | progressColor | string | #000 | Color of the progress bar | | closeBtnColor | string | #fff | Color of the close button |

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.