Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@floating-ui/core

Package Overview
Dependencies
Maintainers
2
Versions
55
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@floating-ui/core

Positioning library for floating elements: tooltips, popovers, dropdowns, and more

  • 1.6.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10M
decreased by-19.19%
Maintainers
2
Weekly downloads
 
Created

What is @floating-ui/core?

The @floating-ui/core package is a low-level toolkit for creating floating elements on a web page, such as tooltips, popovers, dropdowns, and more. It provides the logic to position these elements in relation to a reference element, handling edge cases like viewport overflow and updates on scroll or resize.

What are @floating-ui/core's main functionalities?

Positioning floating elements

This feature allows you to position a floating element (like a tooltip or a dropdown) relative to a reference element on the page. The `computePosition` function calculates the best position based on the specified placement, such as 'bottom', and returns coordinates to position the floating element.

import {computePosition} from '@floating-ui/core';

async function positionElement(referenceElement, floatingElement) {
  const {x, y} = await computePosition(referenceElement, floatingElement, {
    placement: 'bottom'
  });
  Object.assign(floatingElement.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
}

Auto-placement

Auto-placement automatically chooses the best placement for a floating element when the preferred placement is not available. This is useful for dynamically positioned UI elements that need to adapt to different screen sizes or content changes.

import {autoPlacement} from '@floating-ui/core';

async function positionWithAutoPlacement(referenceElement, floatingElement) {
  const {x, y, placement} = await computePosition(referenceElement, floatingElement, {
    placement: 'bottom',
    middleware: [autoPlacement()]
  });
  console.log('Chosen placement:', placement);
  Object.assign(floatingElement.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
}

Detecting overflow

This feature allows you to detect if a floating element is overflowing its boundary (e.g., the viewport or a specific container). It's useful for adjusting the positioning or appearance of elements to prevent them from being partially hidden.

import {detectOverflow} from '@floating-ui/core';

async function checkOverflow(referenceElement, floatingElement) {
  const overflow = await detectOverflow(referenceElement, {
    boundary: document.body
  });
  console.log('Overflow values:', overflow);
}

Other packages similar to @floating-ui/core

Keywords

FAQs

Package last updated on 15 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc