React-modal-zarconoshrnet NPM

react-modal-zarconoshrnet

hrnet-modal-zarconos is a simple and customizable modal component for React applications.

Prerequisites

Node.js version 10 or higher

Recommended Text Editor

Visual Studio Code

Install

npm install i react-modal-zarconoshrnet

Usage

Import the Modal component into your React application and use it as follows:

import React, { useState } from 'react';
import Modal from 'react-modal-zarconoshrnet';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

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

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

const modalContent = <div id="confirmation" className="modal-text">Success</div>;

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
    {isModalOpen && (
      <Modal onClose={closeModal} content={modalContent} options={{ closeText: 'x', modalText: 'Custom Text Here' }} />
    )}
    </div>
  );
}

export default App;

Styles

import 'react-modal-zarconoshrnet/dist/index.css'

Example Usage

Alt text

Props

The Modal component accepts the following props:

onClose: A function to be called when the modal is closed. Required.
content: The content of the modal. This can be a React element or any valid JSX. Required.
options: An object containing additional options for customizing the modal.
closeText: The text for the close button. Required.
modalText: Optional text for the modal itself.

These props allow you to customize the behavior and appearance of the Modal component according to your needs.