p14-react-modal-derrahi
v0.1.7
A React responsive modal component that displays a message with options
0/weekUpdated 2 years agoUnpacked: 7.9 KB
Published by halima_derrahi
npm install p14-react-modal-derrahip14-react-modal-derrahi
 
Install
``bash`
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
`jsx
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.
$3
`jsx
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 (
{isOpen && (
message="Your message here"
buttonText="Button text"
onClose={closeModal}
onButtonClick={() => {
console.log('Button action');
closeModal();
}}
className="your_css_class"
buttonColor="color"
/>
)}
);
}
export default Example;
`Peer Dependencies
The p14-react-modal-derrahi component has the following peer dependencies:
`bash``
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
License
MIT © Halima-DERRAHI