https://github.com/ashikmeerankutty/react-light-popover

A lightweight (1kb) popover for react
https://github.com/ashikmeerankutty/react-light-popover

lighweight npm-package popover react

Last synced: about 2 months ago
JSON representation

A lightweight (1kb) popover for react

• Host: GitHub
• URL: https://github.com/ashikmeerankutty/react-light-popover
• Owner: ashikmeerankutty
• Created: 2021-06-27T02:54:10.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-04T13:25:24.000Z (about 3 years ago)
• Last Synced: 2024-07-05T17:37:22.455Z (3 months ago)
• Topics: lighweight, npm-package, popover, react
• Language: TypeScript
• Homepage: https://codesandbox.io/s/react-light-popover-demo-reze2
• Size: 337 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# React Light Popover

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

## Examples

See demo [here](https://codesandbox.io/s/react-light-popover-demo-reze2)

## 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](#installation)

  - [Sample Usage](#sample-usage)

  - [Props](#props)

# Installation

```bash

$ npm i --save react-light-popover

# or

$ yarn add react-light-popover

```

## Sample Usage

```javascript

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

function App() {

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

  return (

    <>

      Hello}

        onClose={() => setShow(false)}

      >

         setShow(!show)}>

          Show 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 |