React-awesome-popover

A smart popover component with animation support for ReactJS.

View Demo Download Source

Installation

via NPM

npm i react-awesome-popover

via Yarn

yarn add react-awesome-popover

via CDN (unpkg)

https://unpkg.com/react-awesome-popover@latest/dest/react-awesome-popover.js

UMD library exposed as ReactAwesomePopover

const Popover = ReactAwesomePopover;

Do not forget to use the stylesheet.

import "react-awesome-popover/dest/react-awesome-popover.css";

Example

ReactDOM.render(
  <Popover>
    <button>The Target</button>
    <div>The content</div>
  </Popover>,
  document.body
);

The component supports server-side rendering

You can also use nested popovers

ReactDOM.render(
  <Popover>
    <button>The Target</button>
    <div>
      ...
      <Popover>
        <button>The Target</button>
        <div>
          ...
          <Popover>
            <button>The Target</button>
            <div>The content</div>
          </Popover>
          ...
        </div>
      </Popover>
      ...
    </div>
  </Popover>,
  document.body
);

+With react-motion

Set the Motion property to True. Second child becomes a function, It returns the id, popperProps and Arrow.
You need to combine Popper style with motion style

<Popover motion>
  <button>Click</button>
  {(popperProps, Arrow) => (
    <Motion defaultStyle={{ rotateY: 90 }} style={{ rotateY: spring(0) }}>
      {({ rotateY }) => {
        var motionStyle = {
          transform: `${popperProps.style.transform} rotateY(${rotateY}deg)`
        };
        return (
          <div
            {...popperProps}
            style={{ ...popperProps.style, ...motionStyle }}
          >
            <h1>React-motion!</h1>
            {Arrow}
          </div>
        );
      }}
    </Motion>
  )}
</Popover>

You can also use as a tooltip.

Very simple!.

ReactDOM.render(
  <Popover>
    <button>The Target</button>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
      error laudantium incidunt vitae dignissimos praesentium nesciunt,
      <Popover action="hover" placement="top">
        <b>pariatur provident natus</b>
        <div>Wow man</div>
      </Popover>
      aperiam, corporis, quo libero sapiente recusandae! Distinctio deserunt
      dolor sequi, i
    </div>
  </Popover>,
  document.getElementById("app")
);

Props

Prop Type Description
arrow Boolean If False, the arrow is removed
placement String The placement of the popover.
Read more.The default value is auto
targetClass String The name of the target class
contentClass String The name of the content class
arrowClass String The name of the arrow class
action String click or hover.The default value is click
defaultIsOpen Boolean Initial opened state when uncontrolled
onOpen Function Callback invoked when the popover opens after it is added to the DOM.
onClose Function Callback invoked when a popover begins to close.
customArrow JSX Returns a custom arrow
motion Boolean Allows react-motion
modifiers Object Allow passing Popper modifiers as props.
open Boolean Whether the popover is visible. Passing this prop puts the popover in controlled mode.To make the popover completely manageable, you must pass the null value to the action prop
touch Boolean The touch event will be triggered instead of the click event
arrowFill String Fill color of the arrow

GitHub