lyove/next-popover-react

React wrapper for next-popover library

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.