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.