modal-karim-ts v1.1.1
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.