Home page
GitHub

Create floating things easily

useOverlay uses floating-ui and framer-motion under the hood, giving you an API that provides great usability.

View on GitHub
ExampleTooltip.tsx
// Lets create a tooltip component with useOverlay
const Tooltip: React.FC<ITooltipProps> = ({ ... }) => {
  const { styles } = useTheme();


  const { triggerProps, overlay } = useOverlay({
    placement,
    ...
    animations: styles.animations,
    ...
    overlay: () => <div className={styles.classes}>{label}</div>,
  });


  return (
    <>
      {cloneElement(children, triggerProps)}
      {cloneElement(overlay)}
    </>
  );
};

A lot of ... and missing imports etc. YES, but!
Don't worry, we have your back with primitive components also!

Introduction

Getting started

Installation

Step-by-step guides to installing the library.

Usage examples

Learn how the internals work and build components.

API reference

Extend the library with third-party plugins or write your own.

Become a sponsor

If you enjoy my work and want to support me, I'm on Patreon!

Basically, You can think about this package as a helper for creating floating things with floation-ui and animating them with framer-motion.

Quick start

Documentation is not fully complete!

useOverlay is a very new. API is subject to change.

Why Floating UI?

Floating UI is a tiny, low-level library for creating "floating" elements. The library provides two key functionalities:

1. Anchored positioning primitives

CSS is currently missing a feature called “anchored positioning” — the ability to anchor an element (like a tooltip) to another one (like a button) while simultaneously keeping it in view as best as possible by avoiding clipping and overflow. Attempting to do fully dynamic anchored positioning with today’s plain CSS is not possible. Floating UI provides a JavaScript implementation of this feature.

2. User interaction primitives

When creating a popover, dropdown menu, select, or combobox component that follows WAI-ARIA authoring practices, the complexity increases dramatically. Focus traps, indexed navigation, and typeahead are difficult to get right. This functionality is currently available for React DOM but will be made agnostic in the future.

Why framer-motion?

1. Production-ready motion library for React

Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.

2. Simple declarative syntax means you write less code

Less code means your codebase is easier to read and maintain. Animations that work like magic. When animating between two separate components, Framer Motion will take care of everything in between.

Why useOverlay?

1. Because it simplifies the API you need to deal with it.

That's it.

You should know!

For styling useOverlay doesn't do anything than passing className parameter to floating overlay for now. It's acting like headless. You can use Tailwind or some other solutions for syling. Depends on you!

Use cases

  • If you don't wanna handle all the logic of floating elements
  • If you are building your own UI Library
  • If you wanna create a custom build floating overlays
Next
Installation →