Popover
Allows user to show more information on hover or click an element.
version
5.0.0-alpha.35
install
yarn add @welcome-ui/popover
usage
import { Popover, usePopoverState } from '@welcome-ui/popover'
About #
Popover from Reakit with a really nice theme 👀
Usage #
Use usePopoverState, Popover, Popover.Content and Popover.Trigger to create a simple Popover.
Title #
Use Popover.Title props to create a predefined title block.
Close button #
withCloseButton show close button.
Hover to open #
Use triggerMethod='hover' on usePopoverState to open and close the popover by hovering it.
usePopoverState #
We use usePopoverState from Reakit Popover for the state of the popover.
Pass options to usePopoverState :
visible: e.g.const popover = usePopoverState({ visible: true })triggerMethod:clickorhoverwithCloseButton:bool, show/hide cross to close popover
When triggerMethod is set to hover
showTimeout:numberby default to500, show after x milliseconds on hover the triggerhideTimeout:numberby default to300, close after x milliseconds on mouse lease popover
And the hook returns (among other things):
visible: whether the popover is currently visiblehide: a function to hide the popover- for the others options, go to Reakit Popover
Properties #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| onClose | () => void call a function when popover closed | ||
| state | UsePopoverStateReturn |