littlebits/react-popover successor.
npm install --save ataccama/react-popover2
yarn add ataccama/react-popover2
If you want to install already pre-build version, use dist
branch:
npm install --save ataccama/react-popover2#dist
yarn add ataccama/react-popover2#dist
This fork makes use of BEM-style class names. A new prop className
sets the base Block Name, with elements being named body
and trigger
. It also supports a modifiers
prop, which is an array of strings that will be added to BEM class.
We've also removed the triangle (tip) on the popover. We'd rather create this with CSS.
The popover
content. Content is rooted (becomes children of) .Popover-body
and thus body
can be a single node
or an array of nodes
.
Sets the parent element of the body attribute.
Determines Whether or not the popover is rendered.
Determines component Module Name for BEM-Style classes
Determines component Modifiers for BEM-Style classes
Sets a preference of where to position the Popover. Only useful to specify placement in case of multiple available fits. Defaults to null
. Valid values are:
above | right | below | left
:: Prefer an explicit side.
row | column
:: Prefer an orientation.
start | end
:: Prefer an order.
null
:: No preference, automatic resolution. This is the default.
Like preferPlace
except that the given place is a requirement. The resolver becomes scoped or disabled. It is scoped if the place
is an orientation
or order
but disabled if it is a side
. For example place: "row"
scopes the resolver to above
or below
placement but place: "above"
removes any need for the resolver.
A callback function executed every time the user does an action (mousedown
or touchstart
) outside the DOM tree of both Popover
and Target
. A canonical use-case is to automatically close the Popover on any external user action.
The polling speed (AKA time between each poll) in milliseconds for checking if a layout refresh is required. This polling is required because it is the only robust way to track the position of a target in the DOM. Defaults to 200
. Set to a falsey value to disable.
- The React Element that this popover will orient itself around.
target
rendering tree
is unaffected.Popover
will become itsowner
.