Tl-opcr-modal-component-library NPM

React Modal Component README

Overview

This README provides documentation for a custom React Modal component. This component is designed to be flexible and reusable, offering customizable styles and content. It can be used in various parts of a React application to display modal dialogs. Installation

To use the Modal component, simply copy the Modal.js file into your project's component directory. Ensure that you have React and PropTypes installed in your project.

Usage

Here's a basic example of how to use the Modal component in your React application:

jsx

import React, { useState } from 'react'; import Modal from './Modal'; // Adjust the import path based on your file structure

const YourComponent = () => { const isModalVisible, setIsModalVisible = useState(false); const handleClose = () => setIsModalVisible(false);

const modalConfig = {
    isVisible: isModalVisible,
    title: "Modal Title",
    text: "Modal content goes here",
    onClose: handleClose,
    styles: {
        // Custom styles here
    }
};

return (
    <div>
        <button onClick={() => setIsModalVisible(true)}>Open Modal</button>
        <Modal config={modalConfig}>
            {/* Additional content can go here */}
        </Modal>
    </div>
);

};

Props

The Modal component accepts the following props:

config: An object containing the modal configuration:
    isVisible: Boolean to control the visibility of the modal.
    title: String for the modal title.
    text: String for the modal content.
    styles: Object for custom styling.
    onClose: Function to handle the close event.
children: React nodes for additional content to be rendered inside the modal.

Styling

The Modal component allows for custom styling via the styles object in the config prop. The styles object can contain styles for different parts of the modal, such as the overlay, modal container, title, text, and close button.