Modal Component

The Modal component is a reusable React component written in TypeScript that renders a modal dialog box. It provides a flexible and customizable way to display information, warnings, or errors.

Installation

To use the Modal component in your React project, follow these steps:

Install the required dependencies by running the following command:

npm install modal-karim-ts

Import the Modal component into your desired file:

import Modal from "modal-karim-ts";

You're ready to use the Modal component in your application!

Usage

The Modal component accepts several props to customize its behavior and appearance:

Props

| Name | Type | Required | Description | Default | | ------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------- | ------- | | mode | string | required | The mode of the modal. Possible values are "info", "warning","error" or "" to hide the Modal. | ------- | | title | string | optional | The title of the modal. | ------- | | children | ReactNode | optional | The children components to be rendered inside the modal. | ------- | | className | string | optional | Additional class name for styling the modal. | ------- | | onClosed | function | optional | Callback function invoked when the modal is closed. | ------- | | onClose | function | optional | Callback function invoked to determine whether the modal should be closed. Should return a boolean value. | ------- | | enableFadeIn | boolean | optional | Enables fade-in animation for the modal. | false | | enableFadeOut | boolean | optional | Enables fade-out animation for the modal. | false |

Example

import Modal from './Modal';

function App() { const handleClose = () => { return true };

const handleClosed = () => { // Handle closed logic here };

return (

export default App;

Components

The Modal component is composed of the following sub-components:

Title Component

The Title component renders the title of the modal.

Props

text (string, required): The text to be displayed as the title.

Example

import React from 'react';

function Title({ text }) { return {text}; }

export default Title;

Cross Component

The Cross component renders the close button of the modal.

Props (Cross Component)

onClick (function, required): Callback function to be called when the close button is clicked.

Example

import React from 'react'; function Cross({ onClick }) { function CloseModal(event) { onClick(); }

return (

Additional Notes

The Modal component handles closing by clicking outside the modal or pressing the Escape key. These behaviors are implemented using event listeners. The fade-in and fade-out animations are controlled through the isFadeOut state variable and the enableFadeIn and enableFadeOut props. That's it! You now have a reusable Modal component that can be customized and used in your React application.