A smart popover component with animation support for ReactJS

npm i react-awesome-popover

yarn add react-awesome-popover

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

const Popover = ReactAwesomePopover;

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

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

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
);

<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>

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")
);