React-modalium

A modal is a dialog that overlays your application's content. It can be used to display information, collect user input, or perform other tasks.

Installation

To install react-modalium, you can use the following command:

npm i react-modalium

This component has the following props:

• children: The content of the modal.
• isOpen: Whether or not the modal is open.
• modalStyle: Optional CSS styles for the modal container.
• contentStyle: Optional CSS styles for the modal content.
• close: A function that closes the modal.
• title: An optional title for the modal.
• CloseIcon: An optional close icon for the modal.
• closeStyle: Optional CSS styles that will be applied to the close button of the modal.
• closeOnEsc: Whether or not the modal should close when the escape key is pressed.
• closeOnOverlayClick: Whether or not the modal should close when the overlay is clicked.
• titleStyle: Optional CSS styles that will be applied to the title of the modal.

Here is an example of how to use this component:

import React from "react";
import { Modal } from "react-modalium";

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>open</button>
      <div>
        <Modal title="test" isOpen={isOpen} close={() => setIsOpen(false)}>
          <p>test react-modalium</p>
        </Modal>
      </div>
    </div>
  );
};


export default App;

| Prop | Type | Description | |---|---|---| | children | React.ReactNode | The content of the modal. | | isOpen | boolean | Whether or not the modal is open. | | modalStyle | React.CSSProperties | Optional CSS styles for the modal container. | | contentStyle | React.CSSProperties | Optional CSS styles for the modal content. | | close | () => void | A function that closes the modal. | | title | string | An optional title for the modal. | | CloseIcon | React.ReactNode | An optional close icon for the modal. | | closeStyle | React.CSSProperties | Optional CSS styles that will be applied to the close button of the modal. | | closeOnEsc | boolean | Whether or not the modal should close when the escape key is pressed. | | closeOnOverlayClick | boolean | Whether or not the modal should close when the overlay is clicked. | | titleStyle | React.CSSProperties | Optional CSS styles that will be applied to the title of the modal. |