Next-Popover-React

React wrapper for next-popover library

Install

npm i next-popover-react

or

yarn add next-popover-react

or

pnpm add next-popover-react

Usage

import Popover, { PlacementType, EmitType } from 'next-popover-react';

export default () => (
  <Popover 
    content="next-popver-react"
    placement="top-start"
    emit="hover"
  >
    <button>Trigger</button>
  </Popover>
);

API

Config

| Name | Type | Default | Description | | -- | -- | -- | -- | | content | ReactNode \| () => ReactNode | | Required. The content element to be popped up | | appendTo | HTMLElement | document.body | The element to append the popover to. | | placement | top left right bottom top-left top-right bottom-left bottom-right left-top left-bottom right-top right-bottom | top | The placement of the popover. | | showArrow | Boolean | true | Whether to show arrow | | emit | click or hover | click | Trigger emit type | | open | boolean | | Whether to open the popover box by default | | openDelay | number | 100 | Open delay | | closeDelay | number | 100 | Close delay | | enterable | boolean | true | When emit is set to hover, can the mouse enter the popover | | disabled | boolean | | Disabled | | clickOutsideClose | boolean | true | Automatically close the popover when clicking outside | | closeOnScroll | boolean | | Whether to automatically close the popover when the trigger element is scrolled. | | triggerOpenClass | string | | The class added to the trigger when the popover is opened. | | wrapperClass | string | | The class added to the popoverWrapper. | | animationClass | string | | The CSS animation class name. | | onBeforeEnter | () => void | | Called before the CSS enter animation starts. | | onEntered | () => void | | Called when the CSS enter animation ends. | | onBeforeExit | () => void | | Called before the CSS exit animation starts. | | onExited | () => void | | Called when the CSS exit animation ends. | | onOpen | () => void | | Called when the popover is opened. | | onClose | () => void | |Called when the popover is closed. |