# react-icon-popup

> A Tiny Icon Popup Component for React

Latest version **1.0.7** (published 2020-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-icon-popup
pnpm add react-icon-popup
yarn add react-icon-popup
bun add react-icon-popup
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2020-06-24 |
| First published | 2020-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Akash Basavaraju |
| Maintainers | akashtb |
| Keywords | react, typescript, rollup, icon popup, popup |

## Links

- npm: https://www.npmjs.com/package/react-icon-popup
- Repository: https://github.com/akash-basavaraju/react-icon-popup
- Homepage: https://github.com/akash-basavaraju/react-icon-popup#readme
- Issues: https://github.com/akash-basavaraju/react-icon-popup/issues
- npm.io page: https://npm.io/package/react-icon-popup

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2020-06-24
- 1.0.5-0 (next) — 2020-06-23
- 1.0.6 — 2020-06-23
- 1.0.5 — 2020-06-23
- 1.0.4-0 — 2020-06-23
- 1.0.3-0 — 2020-06-23
- 1.0.2 — 2020-06-23
- 1.0.1 — 2020-06-23
- 1.1.0-0 — 2020-06-23

## README

# `react-icon-popup`

A Tiny React Icon Popup. Its compatable with typescript.

## Demo

![Demo](demo.png)

## How to Use

First install the package with npm

`$ npm i react-icon-popup --save`

Import IconPoup from the package.

```js
import IconPopup from "react-icon-popup";
import App from "./App.js";

function main() {
  return (
    <>
      <IconPopup
        popupTriggerer={<span>Icon to be clicked</span>}
        popupContent={
          <div
            onClick={() => {
              alert("popup clicked");
            }}
          >
            Content Inside the Popup
          </div>
        }
        onPopupTrigger={(...args) => {
          console.log(args);
        }}
        popupWidthInPx={100}
      />
    </>
  );
}
```

# API

## IconPopup

| Key                | Value Type       | Is Optional | Info                                                   |
| ------------------ | ---------------- | ----------- | ------------------------------------------------------ |
| popupContent       | React Element    | No          | will be rendered inside the popup                      |
| popupTriggerer     | React Element    | No          | will be rendered as popup opener/closer                |
| popupWidthInPx     | number           | No          | should specify the required width of the popup content |
| containerStyle     | object           | Yes         | same as react style object \*                          |
| arrowStyle         | object           | Yes         | same as react style object \*                          |
| popupStyle         | object           | Yes         | same as react style object \*                          |
| onPopupTrigger     | (isOpened,event) | Yes         | will called when popup opens or closes                 |
| popupMaxHeightInPx | number           | Yes         | can specify mini height for the popup content          |

\* - some position css attributes will be removed

#### Raising Issues and PRs are heartly welcomed.

##### with :heart: by [Akash Basavaraju](https://github.com/akash-basavaraju)

---
_Source: https://npm.io/package/react-icon-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._