floating-modal v0.0.7

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