react-overlay-trigger

react positioned overlay component

Usage no npm install needed!

<script type="module">
  import reactOverlayTrigger from 'https://cdn.skypack.dev/react-overlay-trigger';
</script>

README

React Overlay Trigger

zero dependencies overlay positioning component for react.

npm version npm downloads size

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 = React.forwardRef((props, ref) => <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

npm install
npm start # then goto http://localhost:8080

API

props type default description
placement string x placement direction: top, right, bottom, left, center]
overlay React.ReactNode | React.RefForwardingComponent null overlay content, you can pass DOM node or react component
children React.ReactNode | RefForwardingComponent x the trigger element
triggers array null trigger events: hover, click, focus
container HTMLElement document.body position will be calculated relative to this node

License

React Overlay Trigger is released under the MIT license.