@idui/react-popover
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

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.
  • 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!">
    <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).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
      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

Package Sidebar

Install

npm i @idui/react-popover

Weekly Downloads

887

Version

3.1.0

License

MIT

Unpacked Size

69.1 kB

Total Files

58

Last publish

Collaborators

  • kaprisa57