Popup-i NPM | npm.io

popup-i

popup-i is a simple and lightweight React TypeScript library for rendering popup components. It has no external dependencies and provides an easy way to display popups using a declarative approach.

Installation

You can install popup-i via npm:

npm install popup-i

Usage

Below is an example of how to use popup-i in your React project:

import Popup, { PopupTrigger, PopupContent } from "popup-i";
import Test from "./Test"; // Your component to be displayed in the popup

function App() {
  return (
    <>
      <Popup>
        <PopupTrigger>Open Popup</PopupTrigger>
        <PopupContent className="" closeWhenClickOutside>
          <Test name="test" age={10} address="address" />
        </PopupContent>
      </Popup>
    </>
  );
}

export default App;

API Reference

`Popup`

The root component that manages the popup behavior.

Props

Name	Type	Required	Description
children	`React.ReactNode`	✅	The content of the popup.

`PopupTrigger`

A button or element that triggers the popup when clicked.

Props

Name	Type	Required	Description
children	`React.ReactNode`	✅	The trigger content.
className	`string`	❌	Custom class for styling.

`PopupContent`

The content container of the popup.

Props

Name	Type	Required	Description
children	`React.ReactNode`	✅	The content to display inside the popup.
className	`string`	❌	Custom class for styling.
closeWhenClickOutside	`boolean`	❌	Closes popup when clicking outside (default: `true`).
contentClassName	`string`	❌	Additional styling for the popup content.