popups popupover modal dialog alert notifications popup handling for whole app
npm install @zohodesk/popups``javascrript
Create => TestPopup.js
import testStyle from 'TestPopup.css';
import Popup from 'Popup';
class TestPopup extends React.Component {
constructor(props)
{
super(props);
this.setTargetRef=this.setTargetRef.bind(this); //targetRef
this.setTargetRef=this.setContentRef.bind(this); //contentRef
}
setTargetRef(el){
this.targetRef=el;
}
setContentRef(el){
this.contentRef=el;
}
onClickTogglePopup(e){
//this.props.togglePopup from Popup HOC
this.props.togglePopup(e,this.refs.contentRef,this.targetRef); // Toggle the popup by single function.
}
onClickYes(e){
this.updateToServer(); // Something your works...
this.onClickTogglePopup(e); // Already opened popup, will be close
}
onClickNo(e){
// Something your works...
this.onClickTogglePopup(e); // Already opened popup, will be close
}
render(){
let { popupStyle, removeClose } = this.props;
return (
} onClick={removeClose}>
}
}
// Default binded props { isPopupOpen, isPopupReady , position, styles, popupStyle, popupStyles, removeClose, togglePopup }
// removeClose - helps you prevent the click from popup vs document click.
// Popup(TestPopup, groupName, customStyles);
export default Popup(TestPopup);
use => TestPopup.js
class extend React.compoent{
render(){
``