Creating a Shareable React Package with Popup Widget

I'll show you how to create a React package similar to react-paystack that provides a popup widget. This package will be installable via npm and usable in any React application.

Project Structure

react-popup-widget/
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── PopupWidget.js
│   │   └── PopupButton.js
│   ├── hooks/
│   │   └── usePopupWidget.js
│   ├── contexts/
│   │   └── PopupContext.js
│   └── styles/
│       └── popup.css
├── package.json
├── README.md
├── rollup.config.js (or webpack.config.js)
└── .npmignore

Step 1: Initialize the Package

mkdir react-popup-widget
cd react-popup-widget
npm init -y
Step 2: Install Dependencies
bash
npm install react react-dom
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-postcss rollup-plugin-terser

...code files

Step 6: Build and Publish

bash
# Build the package
npm run build

# Login to npm (first time only)
npm login

# Publish to npm
npm publish

Step 7: Usage Examples for End Users Users can now install and use your package like this:

Installation

npm install react-popup-widget --save
# or
yarn add react-popup-widget

Usage Examples

1. Using the Hook:

jsx

import React from 'react';
import { usePopupWidget } from 'react-popup-widget';

const MyComponent = () => {
  const { isOpen, open, close } = usePopupWidget();

  return (
    <div>
      <button onClick={() => open()}>Open Popup</button>
      
      {isOpen && (
        <PopupWidget 
          isOpen={isOpen}
          onClose={close}
          title="My Popup"
        >
          <p>This is my popup content!</p>
          <button onClick={close}>Close</button>
        </PopupWidget>
      )}
    </div>
  );
};

2. Using the Button Component:

jsx

import React from 'react';
import { PopupButton } from 'react-popup-widget';

const MyComponent = () => {
  return (
    <PopupButton 
      buttonText="Click to Open"
      widgetTitle="Welcome!"
      position="center"
      onOpen={() => console.log('Popup opened')}
      onClose={() => console.log('Popup closed')}
    >
      <h2>Hello World!</h2>
      <p>This is inside the popup</p>
      <form>
        <input type="text" placeholder="Enter something" />
        <button type="submit">Submit</button>
      </form>
    </PopupButton>
  );
};

3. Using the Context Provider (for global popup management):

jsx

// App.js
import React from 'react';
import { PopupProvider, usePopup } from 'react-popup-widget';

const Content = () => {
  const { showPopup } = usePopup();
  
  const openContactForm = () => {
    showPopup(
      <div>
        <h2>Contact Us</h2>
        <form>
          <input type="text" placeholder="Name" />
          <input type="email" placeholder="Email" />
          <textarea placeholder="Message"></textarea>
          <button type="submit">Send</button>
        </form>
      </div>,
      {
        title: "Contact Form",
        width: "600px",
        position: "center"
      }
    );
  };
  
  return <button onClick={openContactForm}>Contact Us</button>;
};

function App() {
  return (
    <PopupProvider>
      <Content />
    </PopupProvider>
  );
}

export default App;

Additional Features You Can Add

• Animations: Add more animation types

• Drag and Drop: Make popups draggable

• Multiple Popups: Support for stacked popups

• Accessibility: ARIA labels and keyboard navigation

• Theming: Customizable CSS variables

• Async Loading: Lazy load popup content

• This creates a professional React package similar to react-paystack that users can easily install and use in their React applications!