react-boundingclientrects
Fetch boundingClientRects by selector for dangerouslySetInnerHTML
This is helpful for building isolated UIs on top of content within dangerouslySetInnerHTML
.
Example
...<BoundingClientRectsdangerouslySetInnerHTML=sanitizedHTMLselector='li'onTargets= />
Props
dangerouslySetInnerHTML
This is required. See React's documentaion.
selector
This selector will be used to query DOM elements. It is these elements that will be surfaced as targets.
selectors=[]
Alternatively, multiple selectors can be provided in a selectors
array.
selectors='.one' '.two' '.red' '.blue'
onTargets(targets=[])
onTargets
will be called with an array of targets. Targets contain the calculated position based on this components main DOM node.
// Calculation exampletargettop - mainNodetop
// Example targetselector: 'li'el: <node>width: 1022height: 18top: 119875right: 1102bottom: 137left: 80