https://github.com/huozhi/react-overlay-trigger

Auto repositioning overlay component for react
https://github.com/huozhi/react-overlay-trigger

auto-reposition overlay position react-component tooltip

Last synced: about 1 year ago
JSON representation

Auto repositioning overlay component for react

• Host: GitHub
• URL: https://github.com/huozhi/react-overlay-trigger
• Owner: huozhi
• Created: 2016-12-25T10:53:40.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-04-26T23:53:40.000Z (about 2 years ago)
• Last Synced: 2024-04-27T00:25:33.820Z (about 2 years ago)
• Topics: auto-reposition, overlay, position, react-component, tooltip
• Language: JavaScript
• Homepage: https://react-overlay-trigger.vercel.app
• Size: 354 KB
• Stars: 47
• Watchers: 5
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Overlay Trigger

> Tiny and simple popover library for React

[![npm version](https://img.shields.io/npm/v/react-overlay-trigger.svg?style=flat-square)](https://www.npmjs.com/package/react-overlay-trigger)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-overlay-trigger?style=flat-square)](https://bundlephobia.com/result?p=react-overlay-trigger)

Checkout [Website](https://react-overlay-trigger.vercel.app) for more details.

## Installation

```sh

npm i -S react-overlay-trigger

```

## Usage

```js

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

const App = () => {

  const { popover, triggerProps } = usePopover({

    placement: 'top',

    hoverToggle: true,

  })

  return (

    


      {popover}

      hover me

    

  )

}

```


## API

```tsx

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

    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

  }

}

```

## License

MIT