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 };
Preview:
Download Details:
Author: vaheqelyan
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/vaheqelyan/react-awesome-popover
License: MIT