React-overlay-trigger NPM

React Overlay Trigger

Small and simple popover library for React

Checkout Website for more details.

Installation

npm i -S react-overlay-trigger

Usage

import { usePopover } from 'react-overlay-trigger'

const App = () => {
  const { popover, triggerProps } = usePopover({
    placement: 'top',
    hoverToggle: true,
  })

  return (
    <div>
      {popover}
      <button {...triggerProps}>hover me</button>
    </div>
  )
}

API

usePopover(
  popover: ReactNode,
  options: {    
    clickToggle?: boolean
    hoverToggle?: boolean
    focusToggle?: boolean
    container?: HTMLElement
    placement: PlacementType
    arrowProps?: { size: number }
    defaultOpen?: boolean
    delayDuration?: number
  }
): {
  popover: ReactNode
  isOpen: boolean
  triggerProps: {
    ref: RefCallback<any>
    onMouseEnter?: (e: MouseEvent) => void
    onMouseLeave?: (e: MouseEvent) => void
    onPointerEnter?: (e: PointerEvent) => void
    onPointerLeave?: (e: PointerEvent) => void
    onFocus?: (e: FocusEvent) => void
    onBlur?: (e: FocusEvent) => void
    onClick?: (e: MouseEvent) => void
  }
}