htec-popover

Intro

A lightweight, highly customizable Portal wrapper around your content. At HTEC, we write this component in order to place datepicker and other content on top of body.

Wrapped in Portal, you content will be append to document.body when IsVisible is true. Otherwise it will be removed. You can use it to generate little popups around inputs, divs or any other situation where you want some content to appear and disappear dynamically around a target. It's also smart enough in positioning process whereas you can use Autoplacement property to fine tune where content should be displayed. More of that in API section.

Install

npm install --save htec-popover

Usage

import React from 'react'
import HtecPopover from 'htec-popover'

class Example extends Component {
  render () {
    return (
      <HtecPopover
                autoPlacement={autoPlacement}
                autoPlacementPriority={autoPlacementPriorityValue}
                autoPlacementSize={{ width: autoPlacementWidth, height: autoPlacementHeight }}
                withArrow={withArrow}
                isVisible={isVisible}
                content={getTooltipContent()}
                placement={placementValue}
                offset={offset}
            >
                <div style={{ maxWidth: '300px', margin: '50px auto', textAlign: 'center' }}>
                    <img style={avatarStyle} src={'https://picsum.photos/200'} />
                </div>
      </HtecPopover>
    )
  }
}

API

Popover

|Property|Type|Required|Description| |--------------|----|--------|-----------| |children|JSX.Element|✔️|This is the JSX. target that you'd like the popover content to track. | |isVisible |boolean|✔️|When this boolean is set to true, the popover is visible and tAdded to DOM. Otherwise it will be removed.| |content |JSX or Function |✔️|Here, you'll provide the content that will appear as the popover. Rather than a JSX element like a <div>, you may supply a function that returns a JSX.Element. | |alignment|string ||This property will position your content at 'start, 'end' or center horizontally.| |autoPlacement|boolean||If you choose autoPlacement it will calculate position based on dimensions.| |withArrow|boolean||By default hidden, you can display arrow pointing your preffered content.| |autoPlacementPriority|Array || You can combine between [top, bottom, left, right]. If you pass [top, left] and there is no space in your container, it will try to place content top-left of your target (children) | |contentClassName|String|| You can specify a custom className for the container here.| |offset|Number||You can fine tune content position with offset property.| |onClickOutside|Function||If detects a click event outside of the target and outside of the popover, you may handle this event here. You can use this if you want to close popover on click outside.|

License

MIT © HTEC