react-light-popover v1.0.4

React Light Popover

A lightweight weight (1kb), zero dependancy popover component for React

Examples

See demo here

Features

• Render popover inside a portal
• Supports positions left, right, top, bottom
• Supports align center (default), start, end
• Persist on scroll
• Switch direction on boundary violation with window
• Highly customisable no wrapper elements are created on content or target element.

Documentation

• Installation
  • Sample Usage
  • Props

Installation

$ npm i --save react-light-popover
# or
$ yarn add react-light-popover

Sample Usage

import { Popover } from "react-light-popover";

function App() {
  const [show, setShow] = useState(false);

  return (
    <>
      <Popover
        show={show}
        positions={["left", "bottom"]}
        align={"center"}
        offset={10}
        content={<div className="content__styles">Hello</div>}
        onClose={() => setShow(false)}
      >
        <button type="button" onClick={() => setShow(!show)}>
          Show popover
        </button>
      </Popover>
    </>
  );
}

Props