Get unlimited public & private packages + package-based permissions with npm Pro.Get started »


1.2.1 • Public • Published

Wrapper around react-popper that handles ~95% of popper scenarios

npm (scoped) CircleCI branch

Use it

npm install --save @snowcoders/react-popover save-prefix "~"

Parent Library

This component is part of a larger components library, react-ui-base. The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy).

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site

This component

~95% of popovers fall into a basic category of I have a target that opens a popover and I want a popover that dismisses after a user action. This library summarizes that logic by providing Target types and Popover types that are interchangable. Currently, the available types are

  • Target
    • Click - Popover opens when the user clicks on the target
    • Hover - Popover opens when the user hovers on the target
  • Popover
    • Click - Popover closes when the user clicks anything except the popover. This click is not sent to the document.
    • Blur - Popover closes when the user clicks anything except the popover. This click is sent to the document.
    • Hover - Popover closes when the user hovers off of the popover

Basic usage

To see a live example, go to our demo site

  popperContent={"I'm inside the popover"}
      placement: "bottom"
  targetContent={"I'm the target text"}


npm i @snowcoders/react-popover

DownloadsWeekly Downloads






Unpacked Size

63.1 kB

Total Files


Last publish


  • avatar
  • avatar