component-highlighter
v1.2.3arrow_drop_downv1.2.3
v1.2.2
v1.2.1
v1.2.0
v1.1.1
v1.1.0
v1.0.9
v1.0.8
v1.0.7
v1.0.6
v1.0.5
v1.0.4
v1.0.3
v1.0.2
v1.0.1
v1.0.0
STATUS
Passing
DOWNLOADS
3,611
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
15 KB
Identify components using a border and tooltip.
1 contributor
Like
Install component-highlighter as a package?
Copied
npm i @bit/bit.evangelist.dev-tools.component-highlighter
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just any of the 1 million components
and packages in Bit or NPM to the example.toggle layout
chevron_left
chevron_right
ComponentHighlighter ()
Identify components using a border and tooltip. The floating elements are positioned using Popper.js, with some custom code.
To select an element in the page, we listen to ‘mouseOver’ event for any user interaction with a child element, and then look for the first parent that has the html attribute "data-bit-id". Components with the ‘data-ignore-component-highlight’ attribute are completely ignored, to avoid changing target when interacting with the highlighter itself.
Properties
| Name | Type | Default value | Description |
|---|---|---|---|
active | boolean | enable highlighting | |
fullScopeName | boolean | true | show full scope name, including owner |
versionMap | VersionMap | override versions for specific components. As versions change rapidly consumers may want to specify them locally. | |
blacklist | Set | list ids to ignore | |
motionTracking | boolean | Actively recalculate position, to support moving elements |