modal-component-library A library of React components created using create-react-app.

Installation Run the following command : npm install fb-modal-oc-lib

This package is a part of the project 14 of the OpenClassrooms "Front End Developer" courses.

If you are developing an application :

To install the fb-modal-oc-lib at the root of the application, run

You can find on npm here : npm install fb-modal-oc-lib

npm install fb-modal-oc-lib

• You are need this version of node.js : v20.10.0 for this project
• You are need this version of react.js : v18.2.0 for this project

To import the modal component into your application, import it at the root of the selected page.

Import at the top of the list of imports this line :

import { Modal } from 'fb-modal-oc-lib'

Import this line at the top of the list of states used at the entry of your function :

const [modalOpen, setModalOpen] = useState<boolean>(false);

import this function before return :

const handleCloseModal = () => {
    setModalOpen(false);
  };

The list of dynamic modal properties and their types:

• isVisible: boolean => Here, you will put the state of your modal. In the example proposed here, it is modalOpen.
• title: string => You can create the title and feed your modal via this property.
• description: string => You can create the description and feed your modal via this property.
• src: string => You can create the image and feed your modal via this property, here, you will need to put the path to your assets.
• onClose: () => void => Here, you go to the function that you named to your liking in order to close the modal. In the example proposed here, it is handleCloseModal.

In the rendering section, import the modal as demonstrated in the example above:

 return (
   <Modal
        isVisible={modalOpen}
        title='Personalized Title'
        description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus elit libero, at finibus dolor auctor id. Aliquam ut lectus vitae odio tincidunt blandit. Vivamus cursus, lorem ut congue rutrum, lectus eros tristique lectus, vitae imperdiet massa purus a orci. Donec nibh'
        src={closeButtonImg}
        onClose={handleCloseModal}
      />
  );

Visual illustrations of the “modal component library” interface