Popupio

This is a collection of components for popups cards and banners for your website. The struggle is well known. You need to have a pretty popup for your website so you search for "popup component react" only to find that you are the one who would have to hustle with the nightmare called CSS to make it looks good.

I have built this collection so you won't have to hustle! At the moment it has 3 components and those are the main component you will need.

Popupio runs ANYWHERE. It doesnt matter if you use React, Vue Angular or Vanilla. It will work for you!

Install

$ yarn add popupio

or

$ npm i popupio

Usage

As mentioned above, Popupio will run on any framework you have but with different API. Because Popupio has being built with React, the default is to run on React-based frameworks as React.js, Next.js, Gatsby or any other framework that came out in the last 10 minutes.

To use with different framework like Angular or Vue See example and read the API.

React based frameworks

import { Banner, Card, Popup } from "popupio";
import React, { userState } from "react";
import "popupio/build/static/css/index.css"

const Child = () => {
  return (
        <h5 className="pacifico" style={{color:"#fff", marginTop:5 }}>
            Hello <span>😷</span>
        </h5>
    )
}

const App = () => {

  const [isShowCard, setShowCard] = useState(true);
  const [isShowPopup, setShowPopup] = useState(true);
  const [isShowBanner, setShowBanner] = useState(true);


  return (
    <div>
      <Banner 
        isShow={isShowBanner}
        bodyClick={() => setShowBanner(!isShowBanner)}
        text={<Child/>}
      />

      <Popup
        bodyClick={() => {
          setShowPopup(!isShowPopup);
          console.log("click")
        }}
        isShow={isShowPopup}
        button={"Hello world"}
        onButtonClick={() => console.log("click")}
        title="Hello world"
        body="Fugiat pariatur culpa enim officia et ea aliquip ad dolore sunt incididunt irure."
      
      />

      <Card 
        bodyClick={() => setShowCard(!isShowCard)}
        isShow={isShowCard}
        button={"Hello world"}
        onButtonClick={() => console.log("click")}
        title="Hello world"
        body="Fugiat pariatur culpa enim officia et ea aliquip ad dolore sunt incididunt irure."
      />
    </div>
}

Other frameworks and Vanila

/* index.html */

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="./node_modules/popupio/build/static/css/index.css">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>

<body>
    <div id="card"></div>
    <div id="popup"></div>
    <div id="banner"></div>
</body>
<script>

</script>
<script src="src/index.js"></script>
</html>


// script.js

import { renderCard, renderPopup, renderBanner } from "popupio";

function app() {
  renderCard("card", {
    bodyClick: () => {},
    isShow: true,
    button: "Hello world",
    onButtonClick: () => console.log("click"),
    title: "Hello world",
    body:`Fugiat pariatur culpa enim officia et ea aliquip ad dolore sunt incididunt irure.   Duis velit excepteur sint anim ut mollit fugiat adipisicing commodo sint cillum culpa. Laboris aliqua do sunt anim fugiat nostrud non ipsum velit. Commodo voluptate et enim aliqua deserunt dolor non.`
  });

  renderBanner("banner", {
    isShow: true,
    bodyClick: () => {},
    text: "Hello"
  });

  renderPopup("popup", {
    bodyClick: () => {},
    isShow: true,
    button: "Hello world",
    onButtonClick: () => console.log("click"),
    title: "Hello world",
    body:`Fugiat pariatur culpa enim officia et ea aliquip ad dolore sunt incididunt irure.   Duis velit excepteur sint anim ut mollit fugiat adipisicing commodo sint cillum culpa. Laboris aliqua do sunt anim fugiat nostrud non ipsum velit. Commodo voluptate et enim aliqua deserunt dolor non.`
  });
}

app();

Notes

Dont forget to import the css

<link rel="stylesheet" type="text/css" href="./node_modules/popupio/build/static/css/index.css">

import "popupio/build/static/css/index.css";

When you want to use the library with vanilla js it's better to include react and react-dom in your project as I did in index.html. This is because it will allow you to render jsx inside properties like title, body, button. Even though you can still render beautiful popups without it, it will give you a lot of freedom so you won't have to depend only on rendering strings. Example of what it can let you do:

renderCard("card",{
    bodyClick:() => {},
    isShow:true,
    button:"Hello world",
    customBodyStyle: {
        padding:"0px"
    },
    customButtonContainerStyle: {
        paddingBottom:"20px",
        paddingLeft:"10px",
        paddingRight:"10px"
    },
    onButtonClick:() => console.log("click"),
    title:"Hello world",
    body:(
        <div onClick={() => alert("hey")}>
        <img 
          alt=""
          style={{objectFit:"cover"}} 
          width={"100%"} height={"200px"} 
          src="https://images.pexels.com/photos/1533960/pexels-photo-1533960.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
        />
        <div style={{maegin:"auto", padding:"20px"}}>
          <p>Fugiat pariatur culpa enim officia et ea aliquip ad dolore sunt incididunt irure. Duis velit excepteur sint anim ut mollit fugiat adipisicing commodo sint cillum culpa. Laboris aliqua do sunt anim fugiat nostrud non ipsum velit. Commodo voluptate et enim aliqua deserunt dolor non</p>
        </div>
      </div>
    )
})

See how I am rendering jsx inside the body prop? This is possible because React and ReactDOM are in scope.

Props

Prop	Description	Type
`title`	The title of card	`String` \| `() => Component`
`body`	The body of card	`String` \| `() => Component`
`button`	The button text or complete button	`String` \| `() => Component`
`onButtonClick`	The button text or complete button	`() => {}`
`customContainerStyle`	Style for card container	`?:{}`
`customHeaderStyle`	Style for card header	`?:{}`
`customButtonStyle`	Style for card button	`?:{}`
`customButtonContainerStyle`	Style for card button container	`?:{}`
`customBodyStyle`	Style for card body	`?:{}`
`customBodyContainerStyle`	Style for card body container	`?:{}`
`customButtonContainerStyle`	can the user close the card?	`Boolean`
`isShow`	toggle to show and hide the card	`Boolean`
`bodyClick`	callback when user click the card	`?:() => {}`

Prop	Description	Type
`customStyle`	Style for banner	`?:{}`
`isShow`	toggle to show and hide the banner	`Boolean`
`bodyClick`	callback when user click the banner	`?:() => {}`

API for none React users

Method	Description	Args
`renderCard`	will render the `Card` component	(`id`, `config`)
`renderPopup`	will render the `Popup` component	(`id`, `config`)
`renderBanner`	will render the `Banner` component	(`id`, `config`)

Args	Description	Type
`id`	DOM element id which will hold the component (must be exist)	`String`
`config`	object with the component configs as described in the Props section	`{}`

CodeSandbox.io examples

To run a complete example

$ git clone
$ yarn
$ yarn start