Smart Animated Popover Component For React

Description:

A smart popover component with react-motion animations for React app.

Installation:

# Yarn
$ yarn add react-awesome-popover
# NPM
$ npm install react-awesome-popover --save

Usage:

Import the popover component.

import Popover from "./Popover";

The basic usage.

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

With animations.

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

Default props.

Popover.defaultProps = {
  arrow: true,
  placement: "auto",
  action: "click",
  modifiers: {},
  motion: false,
  className: undefined,
  isOpen: false
};