A React component for displaying popper based on popper.js

Downloads in past


601.0.44 years ago5 years agoMinified + gzip package size for @d8660091/react-popper in KB


React Popper
CircleCI npm version dependencies Status
React popper.js component.
  • 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


Install with yarn:
yarn add @d8660091/react-popper

Or npm:
npm install @d8660091/react-popper -P

Import in your source file:
import Popper from '@d8660091/react-popper'

// A simple popper
    placement: 'bottom'
  renderRef={({ setReference, toggle }) => (
    <span ref={setReference} onClick={toggle}>
      Popover Trigger
  <div>Popper content</div>

// A nested popper
    placement: 'right',
  renderRef={({ setReference, open, close, isOpened }) => (
        placement: 'bottom',
        setReference: setInnerReference,
        toggle: innerToggle,
        isOpened: isInnerOpened
      }) => (
          ref={el => {
          onClick={() => {
          onMouseEnter={() => {
            !isInnerOpened && open()
          onMouseLeave={() => {
          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):
declare module '@d8660091/react-popper' {
  import { PopperOptions } from 'popper.js'
  import * as React from 'react'

  interface RenderProps extends PopperProps {
    setReference: React.Ref<HTMLElement>
    setPop: React.Ref<HTMLElement>
    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<PopperProps>

  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


You can click ClickableArea without closing popper, which is useful when you have an interactable Popper rendered by another parent Popper.
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.