@realmjs/react-popup NPM

react-popup

react-popup is a JavaScript library for managing and displaying popups in React applications. It provides a flexible and customizable solution for handling popups with various animations and options.

Installation

npm install @realmjs/react-popup --save

Usage

To use Popup Manager in your React application, follow these steps in the example below:

Create a Popup compopnent to be showned

import React from 'react';

const MyPopup = ({ resolve, reject, /* props */ }) => {
  /* Component logic */
}

export default MyPopup

Set up the Popup Provider component in your application's root:

import React from 'react';
import Popup, { usePopup } from '@realmjs/react-popup';
import MyPopup from './MyPopup.jsx';

function App() {

  const popupHandler = usePopup();

  return (
	<div>
	  <Popup.Provider
	    handler={popupHandler}
	    popups={[
		  'myPopup', MyPopup
		]}
	  />
	  <p>
	    <button onClick={showPopup}>Show Popup</button>
	  </p>
	</div>
  );

  function showPopup() {
    popupHandler.get('myPopup').show({ /* props */ })
      .then((result) => {
	    // Handle popup resolution
      })
      .catch((error) => {
	    // Handle popup rejection
      });
  }

}

API Usage

`Popup.Provider` Component

The Popup.Provider component is used to provide popups to the screen. It accepts the following props:

popups: An array of popups, where each popup is an array containing the popup name and the corresponding popup component.
handler: The popup handler created by the usePopup hook.

Example usage:

import Popup from '@realmjs/react-popup';

const Example = () => {
  const popup = Popup.usePopup();
  return (
    <div>
      <Popup.Provider
        popups={[
          ['foo', (props) => <div>FOO</div>],
          ['bar', (props) => <div>BAR</div>],
        ]}
        handler={popup}
      />
      {/* Rest of your components */}
    </div>
  );
};

`usePopup` Hook

The usePopup(props) hook creates a popup handler that can be used to manage the popups.

It receives a `props parameter as an argument. Its purpose is to prevent the occurrence of a stale closure issue.

usePopup hook returns the popup object with the following methods:

`popup.get(name)`

Retrieves a specific popup instance by its name.

Example usage:

const myPopup = popup.get('popupName');

Popup Instance

The Popup class represents a popup instance. It provides methods for configuring and displaying the popup.

`animate(animation, options)`

Configures the animation for the popup. The animation parameter specifies the animation type and its duration, and the options parameter provides additional animation options.

Example usage:

myPopup.animate('flyIn 0.4s');

`overlay({ opacity })`

Configures the overlay style for the popup.

Example usage:

myPopup.overlay({ opacity: '0.2' });

`show(props)`

Shows the popup with optional props.

Example usage:

myPopup.show({ title: 'Hello', message: 'Popup content' });

`resolve(value)`

Resolves the popup with a value.

Example usage:

myPopup.resolve('resolved value');

`reject(error)`

Rejects the popup with an error.

Example usage:

myPopup.reject(new Error('Popup rejected'));

`Popup` Component

The Popup component is used to display a popup. It receives props provided via show(props) along with the { resolve, reject }, allowing the popup itself to resolve or reject the popup.

Example usage:

const CustomPopup = ({ resolve, reject, title, message }) => {
  return (
    <div>
      <h2>{title}</title>
      <p>{message}</p>
      <p>
        <button onClick = {() => resolve()}>Resolve</button>
        <button onClick = {() => reject()}>Reject</button>
      </p>
    <div>
  )
}