A smart popover component with animation support for ReactJS

A smart popover component with animation support for ReactJS

A smart popover component with animation support for ReactJS.

React-awesome-popover

Demo

Installation


via NPM

npm i react-awesome-popover

via CDN (unpkg)

https://unpkg.com/[email protected]/build/index.umd.js

UMD library exposed as ReactAwesomePopover

const Popover = ReactAwesomePopover;

Do not forget to use the stylesheet.

import "react-awesome-popover/build/index.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
);

Performing an animation

Set the renderer property to true. Second child becomes a function, It returns popperProps and arrowProps. You need to combine popper style with motion style

<Popover renderer>
  <button>Click</button>
  {(popperProps, arrowProps) => (
    <Motion defaultStyle={{ rotateY: 90 }} style={{ rotateY: spring(0) }}>
      {({ rotateY, scale }) => {
        var motionStyle = {
          transform: `${popperProps.style.transform} rotateY(${rotateY}deg)`
        };
        return (
          <div
            {...popperProps}
            style={{ ...popperProps.style, ...motionStyle }}
          >
            <h3>Also works well with react-motion</h3>
            <div {...arrowProps} />
          </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")
);

What about the arrow?

Starting from version 4.0.0, this component does not use the svg arrow. Basically you need to handle the arrow with css.

Arrow is built using css

.rap-popper-div-arrow[data-placement*="bottom"] {
  margin-top: -0.6em; /* argin of arrow */
}

.rap-popper-div-arrow[data-placement*="bottom"]::before {
  border-width: 0 1em 0.6em 1em; /* ontrole the dimensions for the arrow */
  border-color: transparent transparent #e3e3e3 transparent; /*set the color for the arrow */
}

But what if I want the shadow to surround the arrow ?. demo I think that you have no choice but to use drop-shadow.

You can also hide the lower shadow of the arrow using the div

There is also one solution using a filter

Without using filter

With filter

Props

Prop Type Description Default
arrow Boolean If false, the arrow is removed true
placement String The placement of the popover.
The default value is auto Popper.js placement
auto
action String click | hover | touch click
onOpen Function The callback is called before opening
onClose Function Callback is called before closing
renderer Boolean Custom renderer (returns function) false
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 false
initZindex Number Initial number for zIndex for item 100

Github Repository