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

Prop	Type	Description
show	boolean	Show or hide popover.
positions	string[]	Determines the positions in which the popover appear. Possible values left, right, top or bottom. By default popover appears on the first position in the array if there is a boundary violation with window it takes the next position if available.
align	string	Determines the alignment of the content, Possible values are start, end and center. By default it will be center.
content	ReactElement	Content to be rendered inside the popover.
onClose	Function	This function is called when popover on body click when popover is open.
children	ReactElement	Target element to which the popover is attached