react-simple-modal-jimmydef

Modal is a customizable React component for displaying modal dialogs. It provides an easy way to create modals with various configurations, including title, content, confirm and close buttons, and more.

Demo

Check out the demo

Screenshot

Installation

You can install the package via npm:

npm install react-simple-modal-jimmydef

Usage

Here's a basic example of how to use the Modal component:

import React, { useState } from 'react';
import Modal from 'react-simple-modal-jimmydef';


const App = () => {
  const [isModalOpen, setModalOpen] = useState(false);

  const openModal = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);
  const confirmAction = () => {
    // Add your confirmation logic here if needed
    closeModal();
  };

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        onClose={closeModal}
        title="Modal Title"
        onConfirmClick={confirmAction}
        showCancelButton={true}

      >
        <p>This is the modal content</p>
      </Modal>
    </div>
  );
};

export default App;

Props

The Modal component accepts the following props:

| Prop | Type | Required | Default | Description | | :------------------ | :-------- | :------: | :-----------: | :----------------------------------------------------------- | | isOpen | Boolean | yes | FALSE | Indicates whether the modal is open. | | onClose | Function | yes | | Function called to close the modal. | | title | String | yes | | The title of the modal. | | onConfirmClick | Function | no | | Function called when the confirm button is clicked. | | confirmLabel | String | no | | Alternative text for the confirm button. | | showCancelButton | Boolean | no | TRUE | Indicates whether the cancel button should be displayed. | | cancelButtonLabel | String | no | "Cancel" | Alternative text for the cancel button. | | showCloseButtonIcon | Boolean | no | FALSE | Indicates whether the icon close button should be displayed. | | closeButtonIcon | String | no | "./cross.svg" | Path of the image for the close icon button. | | children | ReactNode | no | | Content to be displayed in the modal. |

Customization

CSS Classes

The following CSS classes are available for customization:

• rsmj_Overlay: Styles for the modal overlay.
• rsmj_Modal: Styles for the modal content.
• rsmj_Title: Styles for the modal title.
• rsmj_ChildrenSection: Styles for the section containing the children content.
• rsmj_ButtonSection: Styles for the section containing the buttons.
• rsmj_ConfirmButton: Styles for the confirm button.
• rsmj_CancelButton: Styles for the cancel button.
• rsmj_CloseButton: Styles for the close button.
• rsmj_CloseButtonIcon: Styles for the close button icon.

TypeScript Support

This package includes TypeScript declarations to provide type checking and autocompletion for TypeScript users.

The TypeScript declaration file (Modal.d.ts) located in the dist directory provides the types for the Modal component props:

Accessibility

The Modal component is built with accessibility in mind. It sets the aria-hidden attribute on the root element when the modal is open and handles focus management appropriately.

License

This project is licensed under the MIT License.

Contributing

If you have suggestions for how this component could be improved, or want to report a bug, open an issue! I'd love all and any contributions. For more details, check out the contributing guidelines.

Acknowledgements

Thank you for using my Modal component! If you have any questions or feedback, feel free to reach out.