0.1.7 • Published 2 years ago

p14-react-modal-derrahi v0.1.7

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

p14-react-modal-derrahi

NPM JavaScript Style Guide

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

PropTypeDescription
iconStringURL for the icon displayed in the modal
messageStringMessage displayed in the modal
buttonTextStringText for the action button
onCloseFunctionCallback to close the modal
onButtonClickFunctionCallback for the button action
classNameStringCSS 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

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.0

2 years ago