React Popup Component - Modals,Tooltips and Menus —  All in one

travisnpmnpm trendsgithub
github contributorspull requests are welcomecode of conduct
watchersgithub starstweet

Component API

The reactjs-popup API is inspired by semantic popup docs

trigger{node,func}Element to be rendered in-place where the popup is defined
open{bool}Take full control over popup state.
defaultOpenfalse{bool}default open value : initial state
on'hover'{enum,Array}Events triggering the popup. Enums or Array of : 'hover' 'click' 'focus' .
children{node or func}Popup content
position'bottom center'{enum, Array}Position for the popover. Best position(calculated by checking against overlap with boundary element) is applied in the order specified.
Enums:'top left' 'top right' 'bottom right' 'bottom left' 'right center' 'left center' 'top center' 'bottom center' 'center center'
offsetX0numberOffsetX in pixels to be applied to the Popup.
offsetY0numberOffsetY in pixels to be applied to the Popup.
arrowtrue{bool}Arrow element. Note that this should be set to false if position is set to 'center center'
modalfalse{bool}A modal component when modal ={true}
disabledfalse{bool}Disable the popup from showing up and close it if it's open
lockScrollfalse{bool}Disable body scroll when modal is open ( work only with modal)
closeOnDocumentClicktrue{bool}close popup when the overlay clicked
closeOnEscapetrue{bool}close popup when Escape clicked
repositionOnResizetrue{bool}recalculate position when window is resized
mouseEnterDelay100{number}Milliseconds to wait before opening on mouse over
mouseLeaveDelay100{number}Milliseconds to wait before closing on mouse leave
onOpen{func}function called on open event
onClose{func}function called on close event
contentStyle{object}Custom popup content style
overlayStyle{object}Custom overlay style
Note: top and left property will not be overridden.
arrowStyle{object}Custom arrow style
Note: transform property will not be overridden.
className{string}Custom Popup ClassName
Note: this class name will be merged with the component element: ex className='foo' means foo-arrow to style arrow, foo-overlay to style overlay and foo-content to style popup content
keepTooltipInsidetrue{bool,string}html selector, class name or id element that the tooltip must be inside (defaults to window if keepTooltipInside = true) default false

Example : on focus

/* react-live */
const PopupOnFocus =  () => (
    trigger={<input type="text" placeholder="start typing ... " />}
    position="top left"
    <span> On focus popup event </span>