React Popper

![CircleCI](https://circleci.com/gh/d8660091/react-popper)
![npm version](https://badge.fury.io/js/%40d8660091%2Freact-popper)
![dependencies Status](https://david-dm.org/d8660091/react-popper)

React popper.js component.

Features:
* Easy to use, check the usage below.
* React to props change, re-render the popper when options change.
* Nestable, for example, there can be two popup windows respond to _mouseenter_ and _click_ events of a button separately.

Try it

Usage

Install with yarn:

``shell yarn add @d8660091/react-popper`

Or npm:

`shell npm install @d8660091/react-popper -P`

Import in your source file:

`jsx import Popper from '@d8660091/react-popper'

// A simple popper options={{ placement: 'bottom' }} renderRef={({ setReference, toggle }) => ( Popover Trigger )}>

Popper content


// A nested popper
  options={{
    placement: 'right',
  }}
  renderRef={({ setReference, open, close, isOpened }) => (
          options={{
        placement: 'bottom',
      }}
      renderRef={({
        setReference: setInnerReference,
        toggle: innerToggle,
        isOpened: isInnerOpened
      }) => (
                  ref={el => {
            setReference(el)
            setInnerReference(el)
          }}
          onClick={() => {
            close()
            innerToggle()
          }}
          onMouseEnter={() => {
            !isInnerOpened && open()
          }}
          onMouseLeave={() => {
            close()
          }}>
          A button which triggers two popper, one on hover, one on click
        
      )}>
      

        On click inner popper.
      

    
  )}>
  
    On hover outer popper content.


Types (index.d.ts):

`typescript declare module '@d8660091/react-popper' { import { PopperOptions } from 'popper.js' import * as React from 'react'

interface RenderProps extends PopperProps { setReference: React.Ref setPop: React.Ref isOpened: boolean open: () => void close: () => void toggle: () => void }

type PopperProps = { renderRef: (props: RenderProps) => React.ReactNode renderPop?: (props: RenderProps) => React.ReactNode options?: PopperOptions children?: React.ReactNode canClickOutside?: Boolean // default: false style?: Object className?: string defaultIsOpened?: Boolean // default: false }

const Popper: React.ComponentClass

export default Popper }`

* options: popper.js options. * renderRef: the function to render reference, i.e, the element used to position the popper. * children: content inside the popper. * canClickOutside: if true, popper will not hide itself when users click outside. * style and className: goes to the popper instead of the reference. * renderPop: if this function is set, the children, style and className will be ignored and the popper will be rendered using this function. * defaultIsOpened: whether open popper when it mounts

`ClickableArea`


You can click ClickableArea without closing popper, which is useful when you have an interactable Popper rendered by another parent Popper.

`jsx import { ClickableArea } from '@d8660091/react-popper'

clickable text``

Storybook - More usages, including specifying options, styles and nesting. You can also play with the components by live editing the options and placements.