Modal Plugin
A flexible and customizable modal plugin for React applications.
Installation
You can install this modal plugin using npm or yarn:
npm install @jadina/modal-plugin
# or
yarn add @jadina/modal-plugin
Usage
- import the necessary components and use them in your React application:
[!NOTE]
Manual Setup: Users need to include Font Awesome via a CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />Basic Modal with Custom Content
import React from 'react';
import { Modal, useModal } from '@jadina/modal-plugin';
const App = () => {
const { showModal, activeModal, handleOpenModal, handleCloseModal } = useModal();
return (
<>
<button type='button' className='buttonDefault'
onClick={() => handleOpenModal('customContent')}>
Modal with Custom Content
</button>
<Modal
isOpen={showModal && activeModal === 'customContent'} close={handleCloseModal} addCloseIcon={true}>
<div className="custom-modal-content">
<h2>Custom Content Modal</h2>
<p>This modal contains custom content, such as images and text.</p>
<img src="./modal-image.png" alt="" />
</div>
</Modal>
</>
);
};
export default App;Resizable Modal
import React, { useState } from 'react';
import { ResizableModal } from '@jadina/modal-plugin';
const App = () => {
const [showModal, setShowModal] = useState(false);
const openModal = () => {
setShowModal(true);
};
const closeModal = () => {
setShowModal(false);
};
return (
<>
<button type='button' className='buttonDefault'
onClick={openModal}>Open Resizable Modal</button>
{showModal && (
<ResizableModal
onClose={closeModal}
initialWidth={400}
initialHeight={300}
minWidth={300}
minHeight={200}
maxWidth={800}
maxHeight={600}
addCloseIcon={true}
>
{/* Your resizable modal content */}
<h2>Resizable Modal Content</h2>
<p>This modal can be resized.</p>
</ResizableModal>
)}
</>
);
};
export default App;Modal with Footer Button
import React from 'react';
import { Modal, useModal } from '@jadina/modal-plugin';
const App = () => {
const { showModal, activeModal, handleOpenModal, handleCloseModal } = useModal();
return (
<>
<button type='button' className='buttonDefault'
onClick={() => handleOpenModal('footerButton')}>
Modal with footerButton
</button>
<Modal
isOpen={showModal && activeModal === 'footerButton'} close={handleCloseModal} addFooterButton={true}
addCloseIcon={false}>
<h2>footerButton</h2>
</Modal>
</>
);
};
export default App;Modal with Close Overlay
import React from 'react';
import {Modal, useModal } from '@jadina/modal-plugin';
const App = () => {
const { showModal, activeModal, handleOpenModal, handleCloseModal } = useModal();
return (
<>
<button type='button' className='buttonDefault'
onClick={() => handleOpenModal('closeOverlay')}>
Modal with closeOverlay
</button>
<Modal
isOpen={ showModal && activeModal === 'closeOverlay' } close={handleCloseModal} addCloseOverlay={true}>
<h2>closeOverlay</h2>
</Modal>
</>
);
};
export default App;Modal with Close Escape
import React from 'react';
import {Modal, useModal } from '@jadina/modal-plugin';
const App = () => {
const { showModal, activeModal, handleOpenModal, handleCloseModal } = useModal();
return (
<>
<button type='button' className='buttonDefault'
onClick={() => handleOpenModal('closeEscape')}>
Modal with closeEscape
</button>
<Modal
isOpen={ showModal && activeModal === 'closeEscape' } close={handleCloseModal} addCloseEscape={true}>
<h2>closeEscape</h2>
</Modal>
</>
);
};
export default App;Modal with Loader
import React from 'react';
import { Modal, useModal } from '@jadina/modal-plugin';
const App = () => {
const { showModal, activeModal, handleOpenModal, handleCloseModal, isLoading, toggleLoader } = useModal();
const loaderTimer = () => {
toggleLoader();
setTimeout(() => {
handleOpenModal('loader');
}, 1000);
};
const closeModal = () => {
handleCloseModal('loader');
};
return (
<>
<button type='button' className='buttonDefault'
onClick= {loaderTimer}>
Modal with loader
</button>
<Modal
isOpen={showModal && activeModal === 'loader'} close={closeModal} loader={isLoading} addCloseIcon={true}>
<h2>loader</h2>
</Modal>
</>
);
};
export default App;
Modal with ScrollingButton
import React from 'react';
import { CustomScrollingModal, ScrollingButton, useModal } from '@jadina/modal-plugin';
const App = () => {
const { showModal, activeModal, handleOpenModal, handleCloseModal } = useModal();
const openScrollingModal = () => {
handleOpenModal('scrolling-modal');
};
const closeScrollingModal = () => {
handleCloseModal('scrolling-modal');
};
return (
<>
<ScrollingButton text="Open Scrolling Modal"
onClick= {openScrollingModal} />
<CustomScrollingModal
isOpen={showModal && activeModal === 'scrolling-modal'} onClose={closeScrollingModal}>
<h2>Custom Scrolling Modal</h2>
<p>This modal contains custom scrolling content.</p>
<div className="scrollable-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
</div>
</CustomScrollingModal>
</>
);
};
export default App;Features
Classic modal with customizable content and options.
Modal with custom scrolling content for long text.
Button that triggers a custom scrolling modal.
Resizable modal for flexible dimensions.
Props
-
isOpen - Boolean indicating if the modal is open
-
close - Callback function to close the modal.
-
children - Content to be displayed inside the modal
-
addCloseEscape - Whether to close the modal on Escape key press.
-
addCloseOverlay - Whether to close the modal on clicking outside overlay.
-
addCloseIcon - Whether to show the close icon button.
-
customClassName - Custom CSS class name for the modal.
-
addFooterButton - Whether to add a footer button.
-
loader - Whether to display the loader.
-
darkTheme - enable dark theme for the modal
Each modal component accepts specific props. Refer to the documentation for detailed information on available props for each modal type.
Dependencies
-
react: The core React library for building user interfaces.
-
react-dom: React's package for interacting with the DOM.
-
prop-types: A package used for defining and validating prop types.
-
@testing-library/jest-dom: Testing utilities for Jest.
-
@testing-library/react: Testing utilities for React applications.
-
@testing-library/user-event: Testing utility for simulating user interactions.
-
web-vitals: A library for measuring web performance metrics.
-
react-scripts: Scripts and configurations for setting up a React project.
License
This project is licensed under the MIT License - see the LICENSE file for details.