Floating Modal

A customizable, lightweight, smooth, zero depedencies and easy-to-use React component for creating floating modals in your web application.

Demo

you can visit here

Installation

To install Floating Modal, you can use npm or yarn:

npm install floating-modal

or

yarn add floating-modal

Usage

import React, { useState } from "react";
import { FloatingModal } from "floating-modal";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>
      <FloatingModal
        isOpen={isOpen}
        onClose={handleClose}
        initialHeight={150}
        maxHeight={window.innerHeight - 100}
      >
        <h2>Modal Content</h2>
        <p>This is the content inside the modal.</p>
      </FloatingModal>
    </div>
  );
};

export default App;

API Props

| Prop | Type | Default | Description | | -------------- | --------------- | ------------------------ | --------------------------------------------------------- | | intialHeight | number | 150 | Optional. The initial height of the modal (in pixels). | | maxHeight | number | window.innerHeight - 100 | Optional. The maximum height of the modal (in pixels). | | isOpen | boolean | false | Required. Determines whether the modal is open or closed. | | onClose | () => void | undefined | Required. Function to call when the modal is closed. | | onOpen | () => void | undefined | Optional. Function to call when the modal is opened. | | children | React.ReactNode | null | Required. The content to display inside the modal. |