Narnia's Poofy Meatcleaver

    react-overlay-trigger
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    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.

    Install

    npm i react-overlay-trigger

    DownloadsWeekly Downloads

    43

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    38.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • huozhi