JSPM – @enkiduh/package

Package Exports

@enkiduh/package_modal
@enkiduh/package_modal/src/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 (@enkiduh/package_modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Package_modal

A simple and customizable modal component for React.

Prerequisites

Before installing, ensure you have met the following requirements:

Node.js: >= 14.x
npm: >= 6.x
React: >= 18.3.1

Installation

You can install package_modal using npm:

  npm install @enkiduh/package_modal

Demo

Here's an example of how to use the `Modal` component in your React application:

import React, { useState } from 'react';
import Modal from '@enkiduh/package_modal';

function App() {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);
  const [isFormCompleted, setIsFormCompleted] = useState(false);
  const [isClickedToClose, setIsClickedToClose] = useState(false);

  const handleClick = () => {
    setIsClickedToClose(true);
  };

  return (
    <div>
      <button onClick={() => setIsFormSubmitted(true)}>Show Modal</button>
      <Modal
        isFormSubmitted={isFormSubmitted}
        isFormCompleted={isFormCompleted}
        onClick={handleClick}
        isClickedToClose={isClickedToClose}
        modalBorder="2px solid black"
        choiceOne="Form Completed"
        choiceOneBackground="rgb(78, 129, 78)"
        choiceOneColor="white"
        choiceOneFontSize="36px"
        choiceTwo="Form Not Completed"
        choiceTwoBackground="rgb(142, 83, 83)"
        choiceTwoColor="white"
        choiceTwoFontSize="36px"
      />
    </div>
  );
}

export default App;

Styling

You can customize the appearance of the modal by passing the appropriate CSS values as props.

Props

The Modal component accepts the following props:

Prop Name	Type	Description
`isFormSubmitted`	`bool`	Determines whether the form has been submitted.
`isFormCompleted`	`bool`	Determines whether the form has been completed.
`isClickedToClose`	`bool`	Determines whether the modal should be closed.
`onClick`	`func`	Function to handle the click event on the close button.
`modalBorder`	`string`	CSS value for the border of the modal.
`choiceOne`	`string`	Text for the choice when the form is completed.
`choiceOneBackground`	`string`	CSS value for the background of the choice when the form is completed.
`choiceOneColor`	`string`	CSS value for the text color of the choice when the form is completed.
`choiceOneFontSize`	`string`	CSS value for the font size of the choice when the form is completed.
`choiceTwo`	`string`	Text for the choice when the form is not completed.
`choiceTwoBackground`	`string`	CSS value for the background of the choice when the form is not completed.
`choiceTwoColor`	`string`	CSS value for the text color of the choice when the form is not completed.
`choiceTwoFontSize`	`string`	CSS value for the font size of the choice when the form is not completed.

License

MIT

Authors

@Enkiduduh