0.1.7 • Published 2 years ago
p14-react-modal-derrahi v0.1.7
p14-react-modal-derrahi
Install
npm install --save p14-react-modal-derrahi
Modal Component
Description
A reusable modal component that displays a message with options for user actions.
Properties
Prop | Type | Description |
---|---|---|
icon | String | URL for the icon displayed in the modal |
message | String | Message displayed in the modal |
buttonText | String | Text for the action button |
onClose | Function | Callback to close the modal |
onButtonClick | Function | Callback for the button action |
className | String | CSS class to customize the modal |
Examples
<Modal
icon="url_for_your_icon"
message="Your message here"
buttonText="Button text"
onClose={() => console.log('Modal closed')}
onButtonClick={() => console.log('Button action')}
className="your_css_class"
buttonColor="color"
/>
Behavior
- Handles key events (Escape, Enter) for modal interaction.
Usage
import React, { useState } from 'react';
import Modal from 'p14-react-modal-derrahi';
function Example() {
const [isOpen, setIsOpen] = useState(false);
const openModal = () => { setIsOpen(true) };
const closeModal = () => { setIsOpen(false) };
return (
<div>
<button onClick={openModal}>Open Modal</button>
{isOpen && (
<Modal
icon="url_for_your_icon"
message="Your message here"
buttonText="Button text"
onClose={closeModal}
onButtonClick={() => {
console.log('Button action');
closeModal();
}}
className="your_css_class"
buttonColor="color"
/>
)}
</div>
);
}
export default Example;
Peer Dependencies
The p14-react-modal-derrahi component has the following peer dependencies:
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
License
MIT © Halima-DERRAHI