JSPM

hrnet-modal-component

0.1.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q21237F

A simple React Modal component

Package Exports

  • hrnet-modal-component
  • hrnet-modal-component/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hrnet-modal-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hrnet-modal-component

This library is part of a project of my Openclassrooms course. It's a simple Modal React component displaying a text message.

Installation

  npm install hrnet-modal-component

Usage in your react project

Call the component with the right props. Here's an example of what you can do :

// App.js
import { useState } from "react";
import { Modal } from 'hrnet-modal-component';

const MyComponent = () => {

  // Define the state variables here
  const [openModal, setOpenModal] = useState(false);

  ...
  // 'onClick' event to open the modal
  <button onClick={() => setOpenModal(true)}>Open</button>
  ...

  // A way to show the modal with conditional rendering
  { openModal &&
  <Modal
    onClose={() => setOpenModal(false)}
    message="Put your custom message to display here !"/>
    }
}

Modal.propTypes = {
  message: PropTypes.string.isRequired,
  onClose: PropTypes.func.isRequired,
}

export default Modal;

See the project on Github : hrnet-modal-component

If you want to clone the repository :

git clone https://github.com/SylvieCanongia/hrnet-modal-component.git

Inside the repository, install dependencies :

npm install

Launch the app :

npm start

You can see the app at URL http://localhost:3000