create-react-popup's Introduction

🔩 create-react-popup

Features

Eases the creation of Popup components through the Compound Component pattern
Uses React Portals to render the available Popups
Creates a context on each Popup build to support multiple usage
Has different positioning options

Assumptions

This component might help you if your use case meets the following requirements:

Each Popup always depends of a Content to show and a Trigger that shows that content
Everything inside Popup will be rendered except Popup.Content, which will be in a Portal
Then Popup.Content is anything that is rendered in an overlayed element (modal, tooltip, picker, etc)
Both, the Trigger and the Content, are DOM elements of any kind
The Popup component is flexible for complex structure and styles
Each Content automatically closes itself whenever the user clicks outside of it

Example

The next code shows the the flexibility to create multiple types of popups easily.

import React from "react";
import createReactPopup from "create-react-popup";

const Popup = createReactPopup(); // This creates a new Popup with its own context

export default function HelloPopup() {
  return (
    <Popup position="trigger-bottom-left">
      {({ close }) => (
        <>
          {/* You can replace Fragment with whatever makes sense or add additional elements */}
          <Popup.Trigger>
            <button>Say Hello</button>
          </Popup.Trigger>
          <Popup.Content>
            <p>Hello there!</p>
          </Popup.Content>
        </>
      )}
    </Popup>
  );
}

Then the Popup created could be used in your project as:

function Example() {
  return (
    <div className="example">
      <p>The button below opens a simple popup saying "Hello there!"
      <HelloPopup />
    </div>
  );
}