react-popup-component

🔲 React Popup Component is a simple popup that creates a wrapper component around your text and lets you pass down whatever content you wish inside props.children.

🌖 Current status: Minimal bug testing has been done. Use at your own risk

Installation

# With npm
npm install react-popup-component --save
# Or yarn
yarn add react-popup-component

Instructions

//import the component
import Popup from 'react-popup-component';

Next, you will need to add the method inside your class.

    openPopupComponent = (which) => {
        this.popup.openPopupComponent(which);
    }

NOTE: This component will not work with a stateless functional component as it relies on props.children and refs

Lastly, you will need to make an instance of the component inside your render() function, and for every popup instance you will need to have a corresponding onClick event that will toggle that specific component. The specific popup you are targeting is passed down as an argument in the openPopupComponent method, starting with 0.

For example:

   render() {
        return (
            //button that opens popup '0'
           <button onClick={(which) => this.openPopupComponent(0)}>OPEN</button>

           //note that the first instance's 'which' variable is 0 and counts upward
          <Popup which='0' ref={popup => this.popup = popup} width='400px' height='auto'>
              <h1>Anything you wish.</h1>
          </Popup>
          )
        }

Make sure to mark the appropriate 'which' prop that you attached to each component instance. Our second popup component, for example, would be

<button onClick={(which) => this.openPopupComponent(1)}>OPEN </button>

<Popup which='1' ref={popup => this.popup = popup} width='400px' height='auto'>
    <h1>Popup Component Numero Dos</h1>
</Popup>

Escape Hatch Note: If you have buttons or other interactive elements inside your component and wish to close it upon clicking them, you can simply target the class directly and add the 'hide' class to it. For example, to close a popup with the property 'which=0', you would just

        document.querySelector('.popupBackgroundClass-0').classList.add('hide');

TODO

-Set default values for a single popup in case no props are passed down
-Write Tests
-Integrate SCSS into webpack configuration to utilize for loops instead of manually writing out each class incrementer
-Add animations