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
:click
orhover
withCloseButton
:bool
, show/hide cross to close popover
When triggerMethod
is set to hover
showTimeout
:number
by default to500
, show after x milliseconds on hover the triggerhideTimeout
:number
by 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 |