@idui/react-popover
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.3 • Public • Published

    Popover React Component

    NPM Size JavaScript Style Guide Coverage Status LICENSE

    Install

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

    Advantages

    • Fully and easily customizable. It has a bunch of props, including animation, className, arrow visibility, etc.
    • Uses styled-components for styling.
    • 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).
    • 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!">
        <button>Open</button>
      </Popover>
    }

    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)`
      background-color: aquamarine;
      border-radius: 30px;
      border: 2px solid black;
      box-shadow: none;
      &:before { // arrow
        border-left-color: black;
        border-bottom-color: black;
        box-shadow: none;
      }
    `
    
    // if you use lower version of styled-components
    const CustomPopover2 = styled(Popover)`
      && {
        background-color: aquamarine;
        border-radius: 30px;
        border: 2px solid black;
        box-shadow: none;
        &:before { // arrow
        border-left-color: black;
        border-bottom-color: black;
        box-shadow: none;
        }
     }
    `
    
    export function styledPopover(props) {
      return (
          <CustomPopover {...props} content="Hi!">
            <button>Open</button>
          </CustomPopover>
      );
    }

    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
          content="Hi!"
          trigger="click"
          // Popover won't move during opening
          animationTranslateDistance={0}
          // custom animation
          animation={animation}
         >
           <button>Click to Open</button>
         </Popover>
    }

    See more details in storybook

    License

    MIT © kaprisa57@gmail.com

    Install

    npm i @idui/react-popover

    DownloadsWeekly Downloads

    979

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    5

    Last publish

    Collaborators

    • kaprisa57