react-boundingclientrects

Fetch boundingClientRects by selector for dangerouslySetInnerHTML

This is helpful for building isolated UIs on top of content within dangerouslySetInnerHTML.

Example

`` js
import BoundingClientRects from 'react-boundingclientrects'
...
dangerouslySetInnerHTML={sanitizedHTML}
selector='li'
onTargets={targets => setState({targets: targets})} />
`

Props

$3

This is required. See React's documentaion.

$3

This selector will be used to query DOM elements. It is these elements that will be surfaced as targets.

$3

Alternatively, multiple selectors can be provided in a selectors array.

` js
selectors=['.one', '.two', '.red', '.blue']
`

$3

onTargets will be called with an array of targets. Targets contain the calculated position based on this components main DOM node.

` js
// Calculation example
target.boundingClientRects().top - mainNode.boundingClientRects().top
`

` js
// Example target
{
selector: 'li',
el: ,
width: 1022,
height: 18,
top: 119.875,
right: 1102,
bottom: 137,
left: 80
}
``