djyn-custom-lib-modal

A simple, customizable React modal component. Easy to use, minimal setup, and lightweight.

Installation

npm install djyn-custom-lib-modal

or

yarn add djyn-custom-lib-modal

Usage

import React, { useState } from 'react';
import Modal from 'djyn-custom-lib-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        backgroundColor="#00000088"
        textColor="#333"
        closeButtonColor="#ff0000"
      >
        <h2>Hello from the modal!</h2>
        <p>This is a customizable React modal.</p>
      </Modal>
    </>
  );
}

Props

| Prop | Type | Default | Description | |--------------------|----------|--------------|----------------------------------------------| | isOpen | boolean | — | Controls the visibility of the modal | | onClose | function | — | Function called when modal is closed | | children | node | — | Content of the modal | | backgroundColor | string | #00000088 | Background overlay color | | textColor | string | #000 | Text color inside the modal | | closeButtonColor | string | #aaa | Color of the close (×) button |

Close Behavior

• Click on the × button
• Press Escape key

Styling

The components includes his own main style, please use the props to modify it and don't override the CSS.

Repository

GitHub - Matpetitj/custom-lib-modal

License

MIT