Modal Component

The Modal component is a reusable React component written in TypeScript that renders a modal dialog box. It provides a flexible and customizable way to display information, warnings, or errors.

To use this modal, you will need to import the provider in the parent component and wrap the children in it. You will then need to import to context hook from react, and the context from the module in the children, and use the function "displayModal" to display and modify it.

Here is the installation step by step.

Installation

To use the Modal component in your React project, follow these steps:

Install the required dependencies by running the following command:

npm install modal-kf-react

First, import the Provider in your root file, such as index.jsx

import ModalProvider from "modal-kf-react/ModalProvider";

Then, you will need the useContext from react and the context from the module in the desired children file.

import { useContext } from "react";

import { ModalContext } from "modal-kf-react/ModalProvider";

You're ready to use the Modal component in your application!

Usage

You need to wrap your app in the Provider

index.jsx

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ModalProvider>
      <App />
    </ModalProvider>
  </React.StrictMode>
);

app.jsx (or any children with the imports)

const { DisplayModal } = useContext(ModalContext);
 const showModal = () => {
    DisplayModal({
      mode: "info",
      title: "Test modal",
      children: "This modal should be diplayed in blue (because of the mode: info)",
    });
  };

  ...

   return (
    <>
      <button onClick={showModal}>test modal</button>
    </>
  );

With this example, clicking on the button should display a blue modal with a title and a children. Clicking on the close button, or anywhere outside the modal should close it.

Typescript usage

You can use the same setup above if your application is in Typescript, you'll need to also import the props in the children element

import { DisplayModalProps } from "modal-kf-react/ModalProvider";

and then add the props in the children element

App.tsx

 const showModal = () => {
    DisplayModal({
      mode: "info",
      title: "Test modal",
      children: "This modal should be diplayed in blue (because of the mode: info)",
    } as DisplayModalProps);
  };

Props

The Modal component accepts several props to customize its behavior and appearance:

| Name | Type | Required | Description | Default | | -------------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | | mode | string | required | The mode of the modal. Possible values are "default," "info", "warning", "error" or "custom". Default use the pattern shown in the base project, info warning and error are premade modals. "Custom" is a blank modale with no default, this is mainly used to display full components. You can overwrite any props using those modes. | ------- | | title | string | optional | The title of the modal. | ------- | | children | ReactNode | optional | The children components to be rendered inside the modal. | ------- | | className | string | optional | Additional class name for styling the modal. | ------- | | onClosed | function | optional | Callback function invoked when the modal is closed. | return | | onClose | function | optional | Callback function invoked to determine whether the modal should be closed. Should return a boolean value. | return true | | enableFadeIn | boolean | optional | Enables fade-in animation for the modal. | true | | enableFadeOut | boolean | optional | Enables fade-out animation for the modal. | true | | delay | number | optional | Set a timer for the display of the modal. | -1 | | height | string or number | optional | Set the height of the modal | auto | | width | string or number | optional | Set the width of the modal | auto | | modalPosition | string | optional | Set the modal position. Possible values are "center", "top-left", "top-right", "bottom-left", "bottom-right" | "center" | | backgroundColor | string | optional | Set the background color of the modal | Depends on the mode | | backgroundColorTitle | string | optional | Set the background color of the title, if it exists | Depends on the mode | | textColor | string | optional | Set the color of the text inside the modal | mode "default" : black ; other modes "white" | | closePosition | string | optional | Set the position of the close button on the modal. Possible values are "right", "left", "outside-right", "outside-left" | "outside-right" | | border | string | optional | Set the border of the modal | "solid black 2px" | | borderRadius | string | optional | Set the border radius of the modal | "20px" | | borderInside | string | optional | Set the color of the border on top or on the left of the children | "solid black 1px" | | boxShadow | string | optional | Set the box shadow of the modal | "none" | | orientation | string | optional | Set the orientation of the display inside the modal. The display is in flex. Accepts only "row". | "column" |