react-popover-lite

A simple popover React higher-order component with zero dependencies, TypeScript support.

This popover is implemented using React Portal.

Install

yarn add react-popover-lite

or

npm install react-popover-lite --save

Examples

import React, { useState } from "react";
import Popover from "react-popover-lite";

...

const [isOpen, setOpen] = useState(false);

<Popover
  isOpen={isOpen}
  position="bottom"
  onClickOutside={() => setOpen(false)}
  content={
    <div
      style={{
        border: "1px solid black",
        padding: 10,
        width: 200,
        marginTop: 10,
      }}
    >
      this is the popover content
    </div>
  }
>
  <button onClick={() => setOpen(!isOpen)}>click here!</button>
</Popover>

API

| Props | Type | Required | Description | Default | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | ------------------------------------------------------ | :------: | | children | ReactNode | ✓ | A React child which the popover's position will follow | | | isOpen | Boolean | ✓ | Show/hide popover | false | | onClickOutside | Function: () => void | | Handle event when user clicking outside of the popover | | | content | ReactNode | ✓ | Popover content | | | zIndex | Number | | Popover content | 100 | | position | 'top' | 'right'| 'bottom'| 'left'| 'topLeft'| 'topRight'| 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | | Popover position | 'bottom' |