Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @snowcoders/react-popover with all npm packages installed. Try it out:

require("@snowcoders/react-unstyled-button/package.json"); // @snowcoders/react-unstyled-button is a peer dependency. require("classnames/package.json"); // classnames is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("react-popper/package.json"); // react-popper is a peer dependency. require("react-resize-detector/package.json"); // react-resize-detector is a peer dependency. require("tslib/package.json"); // tslib is a peer dependency. var reactPopover = require("@snowcoders/react-popover")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@snowcoders/react-popover v1.2.1

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

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 https://snowcoders.github.io/react-ui-base/

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 https://snowcoders.github.io/react-ui-base/

<Popover
  isOpen={false}
  popperContent={"I'm inside the popover"}
  popperOptions={{
      placement: "bottom"
  }}
  popperType={"hover"}
  targetContent={"I'm the target text"}
  targetType={"hover"}
/>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free