react-icon-popup

A Tiny React Icon Popup. Its compatable with typescript.

Demo

How to Use

First install the package with npm

$ npm i react-icon-popup --save

Import IconPoup from the package.

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