ts-modal-wrapper-component

ts-modal-wrapper

Package to provide a simple way to create modal dialogs with custom content

Installation

ts-modal-wrapper-component

ts-modal-wrapper-component is available as an npm package.

npm:

npm i ts-modal-wrapper-component

yarn:

yarn add ts-modal-wrapper-component

Getting started with ts-modal-wrapper

Example

import React, { useState } from "react";
import ModalWrapper from "ts-modal-wrapper-component";
import "./App.css";

interface FormData {
  username: string;
  email: string;
}

function App() {
  const [openModal, setOpenModal] = useState(false);
  const [formData, setFormData] =
    useState < FormData > ({
      username: "",
      email: "",
    };
)

  const handleOpenModal = () => {
    setOpenModal(true);
  };

  const handleCloseModal = () => {
    setOpenModal(false);
  };
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = () => {
    console.log("Username:", formData.username);
    console.log("Email:", formData.email);
    handleCloseModal();
  };

  return (
    <div className="App">
      <header>
        <h1>Welcome to the React Modal Demo</h1>
        <p>Click the button below to open the modal and interact with it.</p>
      </header>
      <button className="custom-button" onClick={handleOpenModal}>
        Open Modal
      </button>
      <ModalWrapper
        open={openModal}
        onClose={handleCloseModal}
        title="Modal Title"
        height="400px"
        width="600px"
      >
        <div className="modal-content">
          <h2>Modal Content</h2>
          <form>
            <div className="form-group">
              <label htmlFor="username">Username:</label>
              <input
                type="text"
                id="username"
                name="username"
                value={formData.username}
                onChange={handleInputChange}
                placeholder="Enter your username"
              />
            </div>
            <div className="form-group">
              <label htmlFor="email">Email:</label>
              <input
                type="email"
                id="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                placeholder="Enter your email"
              />
            </div>
            <div className="button-group">
              <button className="custom-button" onClick={handleSubmit}>
                Submit
              </button>
              <button className="custom-button" onClick={handleCloseModal}>
                Close
              </button>
            </div>
          </form>
        </div>
      </ModalWrapper>
    </div>
  );
}

export default App;

Props

Name	Type	Default	Required	Description
open	boolean	false	yes	Controls whether the modal is open or closed.
onClose	function		Yes	Callback function to handle modal close event.
title	string		No	Specifies the main heading/title of the modal.
height	string		No	Specifies the height of the modal.
width	string		No	Specifies the width of the modal.
children	ReactNode		No	Custom content to be displayed within the modal.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.