overlay-border

v1.2.0

v1.1.1

v1.1.0

v1.0.3

v1.0.2

v1.0.1

v1.0.0

STATUS

Passing

DOWNLOADS

3,034

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

10 KB

Highlight a component using a border

Overlay

1 contributor

Install overlay-border as a package?

Copied

npm i @bit/bit.evangelist.dev-tools.overlay-border

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

OverlayBorder ()

Highlight a component using a border.
The border is positioned at the top left of the component using Popper.js, and covers the element from edge to edge. The border does not interfere with normal user flow, using pointer-events: none; user-select: none;.

Example

this.elementRef = react.createRef();
//...
<OverlayBorder targetElement={this.elementRef.current} />

Properties

Name	Type	Description
targetElement	`HTMLElement`	DOM element to highlight
motionTracking	`boolean`	Actively recalculate position, to support moving elements