modal-kf-react v1.0.10

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: