popover-windows

popover in multi window


Keywords
reactjs, ui component, libs, popover, multi window, popoup manager, javascript
License
MIT
Install
npm install popover-windows@1.0.5

Documentation

Popover

  • Using popover in multi window

API:

Property Type Required Description Default
identity object Identity popover according window and name empty
content React element or underling html Content overlay popover null
placement string Position where popover was displayed. Includes: top, top-left, top-right, right, righ-top, right-bottom,... bottom-right
affectWindow string array List window (Every window has multi popover) was affected on page click or press keyboard events. If value = [] affect total window Only window where popover defined
anchorEl dom node Any element. Popover's position depend on this element null
fixedPosition object popover was fit on window. Includes 2 prop left and top. Ex: {left:'300px', top:'500px} null
deltaPosition object Diff position with anchor element position} {left:0, top:'0'}
isArrow boolean false
style object Allow override style popover root null
className string Allow append className to popover container null
mountContainter Dom Node Specific container render Window global
windowContext Object. {window: window, document: window.document} Specific context of window

Example:

import Popover, {PopoverManager} from 'popover-windows';

- Where open popover, using method: PopoverManager.openPopover({windowId:'1',name:'your popover name', anchorEvent: event, onAfterOpen: () => console.log('do something after open popover)});
- Where close popover, using method: PopoverManager.closePopover({windowId:'1',name:'your popover name'});

onClick (event) {
    PopoverManager.openPopover({windowId:'1',name:'your popover name',anchorEvent: event});
}
<Popover
	identity={{windowId:'1',name:'your popover name'}}
	content={<YourComponent/>}
	placement={'bottom-left'} 
/>
  • Get popover:
const status = PopoverManager.isVisible({windowId:'1',name:'your popover name'});
  • Listent popover status:
PopoverManager.on('afterOpen', {windowId,popoverName}, () => {
	// Do something
});
PopoverManager.removeListener('afterOpen', {windowId,popoverName}, () => {
	// Do something
});

Supported Events : afterOpen, beforeClose