React-overlay-trigger NPM

React Overlay Trigger

zero dependencies overlay positioning component for react.

react-overlay-trigger.vercel.app

Usage

npm i -S react-overlay-trigger

import React from 'react'
import OverlayTrigger from 'react-overlay-trigger'

const Overlay = ({style, ...rest}) => <span {...rest}>{children}</span>

const overlay = <Overlay>yep</Overlay>

const Button = <div {...props} ref={ref} />

const Demo = () => (
  <div>
    <OverlayTrigger placement="right" overlay={overlay} triggers={["hover"]}>
      <Button className="Button">right</Button>
    </OverlayTrigger>

    <OverlayTrigger placement="top" overlay={overlay} triggers={["click"]}>
      <button className="Button">top</button>
    </OverlayTrigger>
  <div>
)

Development

pnpm install
pnpm dev

API

type TriggerType = 'hover' | 'click' | 'focus';
type PlacementType = 'top' | 'bottom' | 'left' | 'right' | 'center';
type OverlayTriggerProps = {
  overlay?: React.ReactNode;
  triggers: TriggerType[];
  container?: HTMLElement;
  placement: PlacementType;
  arrowProps?: {
    size: number;
  };
};