import React from "react";
import ElementPopper from "react-element-popper";
import "react-element-popper/build/element_popper.css"; // arrow styles and shadow

export default function Example() {
  const Component = ({ size, backgroundColor, children }) => {
    return (
      <div
        style={{
          width: size + "px",
          height: size + "px",
          backgroundColor,
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        {children}
      </div>
    );
  };

  return (
    <ElementPopper
      element={
        <Component size="80" backgroundColor="red">
          Refrence Element
        </Component>
      }
      popper={
        <Component size="100" backgroundColor="white">
          Popper Element
        </Component>
      }
      arrow
      popperShadow
    />
  );
}

Availble props

Name	Type	Default
element	React.ReactElement
popper	React.ReactElement
position	String	"bottom-center"
arrow	Boolean or React.ReactElement	false
fixMainPosition	Boolean	false
fixRelativePosition	Boolean	false
animations	Array	[]
popperShadow	Boolean	false
active	Boolean	true
offsetY	Number	0
offsetX	Number	0
zIndex	Number	0
containerStyle	React.CSSProperties
arrowStyle	React.CSSProperties
containerClassName	String
arrowClassName	String
ref	React.RefObject
onChange	Function
portal	Boolean	false
portalTarget	HTMLElement

Availble Positions

Position	Alternative
top	top-center
bottom	bottom-center
left	left-center
right	right-center
top-start	top-left
top-end	top-right
bottom-start	bottom-left
bottom-end	bottom-right
left-start	left-top
left-end	left-bottom
right-start	right-top
right-end	right-bottom

Browser (none react-app)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- React -->
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

    <!-- Element Popper -->
    <script src="https://cdn.jsdelivr.net/npm/react-element-popper@latest/build/browser.min.js"></script>

    <!-- Optional Style -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/react-element-popper@latest/build/element_popper.css"
    />
    <title>React Element Popper</title>
  </head>
  <body>
    <div
      id="elementPopper"
      style="
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      "
    />
  </body>

  <script>
    function Component({ size, backgroundColor, children }) {
      return React.createElement(
        "div",
        {
          style: {
            width: size + "px",
            height: size + "px",
            backgroundColor,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            textAlign: "center",
          },
        },
        children
      );
    }

    ReactDOM.render(
      React.createElement(ElementPopper, {
        element: React.createElement(
          Component,
          {
            size: 80,
            backgroundColor: "red",
          },
          "Refrence Element"
        ),
        popper: React.createElement(
          Component,
          {
            size: 100,
            backgroundColor: "white",
          },
          "Popper Element"
        ),
        popperShadow: true,
        arrow: true,
      }),
      document.getElementById("elementPopper")
    );
  </script>
</html>

Keywords

FAQs

What is react-element-popper?

Is react-element-popper popular?

Is react-element-popper well maintained?

Package last updated on 27 Jul 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-element-popper

ElementPopper

Installation

npm

yarn

Demo

Usage

Availble props

Availble Positions

Browser (none react-app)

Keywords

Related posts

Malicious npm Packages Use Telegram to Exfiltrate BullX Credentials

Backdooring the IDE: Malicious npm Packages Hijack Cursor Editor on macOS