React Bounded Overlay Manager

Overview

React Bounded Overlay Manager is a React library, with TypeScript support, designed to create and manage overlay components within a specified bounding container. It offers flexible positioning, dynamic event-based show/hide behavior, customizable event handling, and an API for extended control.

Key Features

• Flexible Positioning: Utilize position and offset parameters within the Overlay component to achieve precise and strategic placement of overlays.
• Dynamic Visibility: Effortlessly configure the appearance and disappearance of overlays in response to user interactions, enhancing user experience and interface responsiveness.
• Customizable Event Handling: Tailor overlay visibility to align with specific application requirements. This includes the ability to control when overlays appear or disappear based on user interactions, system events, or custom triggers. Configure these settings to suit your application's behavior and user experience needs.
• Extended Control via API: Access the API for comprehensive control over overlay behavior, extending beyond the capabilities offered by component properties.

Installation

npm install react-bounded-overlay-manager

Basic Example

import React, { useRef } from 'react';
import BoundedOverlayManager, { Overlay, PredefinedPosition } from 'react-bounded-overlay-manager';

const BasicExample = () => {
  const boundingComponentRef = useRef(null);

  return (
    <>
      <div ref={boundingComponentRef} style={{ width: '70vw', height: '50vh', border: '1px solid black' }}>
        Hover over this div to display overlays.
      </div>
      {/* 
        The BoundedOverlayManager component can be flexibly placed anywhere within the React component tree of your application's JSX. Its internal logic will handle the actual rendering location of overlays, ensuring consistent functionality regardless of its position in the JSX. 
      */}
      <BoundedOverlayManager boundingComponentRef={boundingComponentRef}>
        <Overlay position={PredefinedPosition.BOTTOM_CENTER}>
          <button>Overlay Button</button>
        </Overlay>
        {/* more overlays here */}
      </BoundedOverlayManager>
    </>
  );
};

Learn More

For more detailed information on how to utilize React Bounded Overlay Manager to its fullest, explore the documentation

For Developers

If you are interested in contributing to the project or want to build and test the library, please refer to our Developer Guide for detailed instructions on setup, development, testing, and deployment.