Newton's Poleless Magnet

    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published

    Popover React Component

    NPM Size JavaScript Style Guide Coverage Status LICENSE


    npm install --save @idui/react-popover
    yarn add @idui/react-popover


    • Fully and easily customizable. It has a bunch of props, including animation, className, arrow visibility, etc.
    • Able to change dimensions depending on available space (if maxHeight and maxWidth not specified).
    • Able to choose better placement if there is no room (if guessBetterPosition = true, default false).
    • Able to follow trigger (if considerTriggerMotion = true, default false for better performance).
    • Able to change placement when content dimensions changed (if considerContentResizing = true, default false for better performance).
    • Able to detect trigger width and height and use them for content (useTriggerWidth, useTriggerHeight).
    • Considers window resizing.
    • Closes on scroll event of scroll container if closeOnScroll = true (default true), otherwise changes position. Use scrollHandlerMinDistance prop to specify min scrolled distance to call scroll handler.
    • Supports 12 different placements.
    • Able to close on remote click, enter and escape buttons press.
    • Able to open on hover, click, focus and contextMenu events.
    • Supports external visibility control (if isOpen specified).
    • Renders content into body or provided container.
    • Supports children and content functions and provides them with some useful props.
    • Accepts custom offset from default position.
    • Accepts custom mouse enter/leave delay if trigger is "hover".
    • Accepts custom trigger container display and tag.
    • Accepts arrowSize, arrowOffset and arrowPlacement for arrow customization.
    • Lazy initialization. Popover initializes on first trigger event.

    See props in Docs

    Basic Example

    import React from 'react'
    import Popover from '@idui/react-popover'
    function Example() {
      return <Popover content="Hi!">

    Consider Trigger Motion

    Popover can follow trigger if considerTriggerMotion = true.

    See example here

    Custom styles. Live Example

    Note: if you use styled-components of different version use && for styles priority

    import React from 'react'
    import Popover from '@idui/react-popover'
    import styled from 'styled-components'
    const CustomPopover = styled(Popover).attrs({
      arrowColor: 'black',
      background-color: aquamarine;
      border-radius: 30px;
      border: 2px solid black;
      box-shadow: none;
      .idui-popover__arrow { // arrow
        box-shadow: none;

    Also you can use className

    Custom Animation

    You can configure custom animation by defining framer-motion props. In this example used simple opacity animation, i.e. you won't see any jumping or movement. Live Example.

    import React from 'react'
    import Popover from '@idui/react-popover'
    const animation = {
      initial: {
          opacity: 0,
      animate: {
          opacity: 1,
       exit: {
         opacity: 0,
         transition: { duration: 0.1 },
    function PopoverWithCustomAnimation() {
      return <Popover
          // Popover won't move during opening
          // custom animation
           <button>Click to Open</button>

    See more details in storybook


    MIT ©


    npm i @idui/react-popover

    DownloadsWeekly Downloads






    Unpacked Size

    69.1 kB

    Total Files


    Last publish


    • kaprisa57