Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

htec-popover

HTEC21MIT1.0.2

A lightweight, highly customizable Portal wrapper around your content. Made with ♥ by HTEC.

readme

htec-popover

NPM JavaScript Style Guide

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