dropdown-auto-position

dropdown-auto-position is a reusable, flexible dropdown overlay component for React that automatically adjusts its position based on available space. It opens upward or downward depending on the screen space and supports outside-click detection to close the dropdown when clicked outside.

Features

• Automatic Positioning
  Opens upward or downward based on available space.

• Outside Click Detection
  Closes the dropdown when clicked outside.

• Customizable Offset
  Adds spacing between the dropdown and trigger button.

• Supports React & TypeScript
  Written in TypeScript, with type declarations included.

Installation

To install the package, use the following command:

npm install dropdown-auto-position

Usage

Here’s an example of how to use dropdown-auto-position in your project:

import React, { useRef, useState } from 'react';
import { DropdownOverlay } from 'dropdown-auto-position';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  const buttonRef = useRef(null);

  return (
    <div>
      <button ref={buttonRef} onClick={() => setIsVisible(!isVisible)}>
        Toggle Dropdown
      </button>
      <DropdownOverlay
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        triggerRef={buttonRef}
        offset={10}
      >
        <div>
          <p>Dropdown Content</p>
          <p>Additional content here...</p>
        </div>
      </DropdownOverlay>
    </div>
  );
};

export default App;

Props

Prop	Type	Description	Default
isVisible	boolean	Controls the visibility of the dropdown.	false
onClose	() => void	Callback function to close the dropdown. Triggered when an outside click is detected.	-
triggerRef	React.RefObject	Reference to the trigger element (e.g., button) that opens the dropdown.	-
children	ReactNode	The content to display within the dropdown.	-
offset	number	Space between the dropdown and the trigger element, used to prevent overlap.	8

CSS Styling

The component comes with default styles, but you can customize it to fit your needs. Here’s a sample CSS file:

/* dropdown-overlay.css */
.dropdown-overlay {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 8px;
  width: 200px;
}

.dropdown-overlay.open-upwards {
  margin-bottom: 8px;
}

.dropdown-overlay.open-downwards {
  margin-top: 8px;
}

Example

This is a simple usage example to toggle a dropdown overlay. The dropdown opens below or above the button based on available space, and it closes when you click outside of it.

import React, { useRef, useState } from 'react';
import { DropdownOverlay } from 'dropdown-auto-position';

const ExampleDropdown = () => {
  const [dropdownVisible, setDropdownVisible] = useState(false);
  const triggerRef = useRef(null);

  return (
    <div>
      <button ref={triggerRef} onClick={() => setDropdownVisible(!dropdownVisible)}>
        Open Dropdown
      </button>
      <DropdownOverlay
        isVisible={dropdownVisible}
        onClose={() => setDropdownVisible(false)}
        triggerRef={triggerRef}
        offset={10}
      >
        <div>
          <p>Item 1</p>
          <p>Item 2</p>
        </div>
      </DropdownOverlay>
    </div>
  );
};
export default ExampleDropdown;

Contributing

Feel free to open issues or submit pull requests if you'd like to contribute to improving this component. Any contributions are welcome!

License

This project is licensed under the MIT License.