React Custom Modal - jcl-custom-modal

jcl-custom-modal is a customizable modal component for React applications. This package allows developers to easily add modals to their projects and customize the content and appearance of the modal.

Features

- Customizable Content: Pass any content as children to display inside the modal.
- Simple to Use: Lightweight and easy to integrate into any React project.
- Closable: Provides a close button to dismiss the modal.

Installation

To install the package, use npm or yarn:

bash
npm install jcl-custom-modal
or
bash
yarn add jcl-custom-modal

Usage

Heres a simple example of how to use the JclModal component in your React application:

`` js
import React, { useState } from 'react';
import JclModal from 'jcl-custom-modal'; // Import the modal component
import 'jcl-custom-modal/dist/JclModal.css'; // Import the CSS styles

const App = () => {
const [isOpen, setIsOpen] = useState(false);

return (


);
};

export default App;

`

Props


- isOpen (boolean): Controls whether the modal is visible.
- onRequestClose (function): A callback function that triggers when the modal is closed.
- className (string): Additional class names for custom styling.

Props

To customize the appearance of the modal, you can override the default CSS styles. Below are the class names available for customization:
- .modal-overlay: The background overlay.
- .modal-content: The container for the modal content.
- .close-button`: The close button.

Link

https://www.npmjs.com/package/jcl-custom-modal

OCR14_JclModal_codeSource