modal-library-mohammed

1.0.5 • Public • Published

modal-hrnet-library

Library of a React Modal Component for HealthWealth (OpenClassrooms project 14)

This component displays a modal in the center of the screen.

NPM

Install

To install this package, use the following command :

npm i modal-library-mohammed

Usage

The Modal component needs 5 props :

  • {closeModal} : the function to close the modal (you have to add it closing function in your file)
  • {text} : the text to display in the modal
  • {imageUrl} : the url of an image you want to display
  • {textLink} : the text of the link
  • {linkUrl} : the Url of the link

Example :

import React, { useState } from "react";
import { ModalComponent } from "modal-library-mohammed";

function Example() {
  const [showModal, setShowModal] = useState(false);

  const imgUrl = "https://cdn-icons-png.flaticon.com/512/3789/3789820.png";
  const text = "Employee Created!";
  const textLink = "View Current Employees";
  const linkUrl = "/employee-list";

  const openModal = () => {
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <button onClick={openModal}> Open Modal </button>
      {showModal && (
        <ModalComponent closeModal={closeModal} text={text} imageUrl={imageUrl} textLink={textLink} linkUrl={linkUrl} />
      )}
    </div>
  );
}

Readme

Keywords

none

Package Sidebar

Install

npm i modal-library-mohammed

Weekly Downloads

1

Version

1.0.5

License

ISC

Unpacked Size

10.7 kB

Total Files

4

Last publish

Collaborators

  • mohammediche