A versatile and reusable React component for displaying contextual information or actions triggered by user interactions, such as clicks or hovers. This component is ideal for tooltips, dropdowns, and other similar UI patterns.

The Popup module includes three main components:

1. Popup: The main container that manages visibility and positioning.
2. PopupContent: The content container that adjusts its position based on available space and user-defined preferences.
3. PopupHandle: The trigger element that initiates the popup display.

Specifies the trigger action ('click' or 'hover'). Default is 'hover'.

A ReactNode or a function that returns a ReactNode. If a function, it receives an object with a close method to programmatically close the popup. className (optional): Additional CSS classes for custom styling. Example

import { Popup, PopupContent, PopupHandle } from '@your-org/popup-component';

function App() {
  return (
    <div className="app">
      <Popup action="click" className="custom-popup">
        {({ close }) => (
          <>
            <PopupHandle>
              <button>Click Me</button>
            </PopupHandle>
            <PopupContent position="below">
              <div>
                <p>This is the popup content.</p>
                <button onClick={close}>Close</button>
              </div>
            </PopupContent>
          </>
        )}
      </Popup>
    </div>
  );
}

export default App;

Defines the preferred position ('above' or 'below') of the content relative to the handle. children: The content to be displayed inside the popup.

<PopupContent position="below">
  <div>
    <p>This is dynamically positioned content.</p>
  </div>
</PopupContent>

<PopupHandle>
  <button>Hover or Click Me</button>
</PopupHandle>


<PopupHandle>
  <button>Hover or Click Me</button>
</PopupHandle>

The component ensures the popup content stays within the viewport by calculating the optimal left position based on the handle's position and the content's width.

The component distinguishes between click and hover actions using conditional event handlers, ensuring appropriate behavior for different interaction types.

By handling onBlur and onFocus events, the popup remains open when interacting with its children, enhancing accessibility and user experience.

We welcome contributions to improve this component. Please open an issue or submit a pull request on GitHub.

This project is licensed under the MIT License. See the LICENSE file for details.