modal-karim-ts

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 (

{/_ Example usage of the Modal component _/}

This is an example of a modal dialog.

); }

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 (

x

); } export default Cross;

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.