.png)
2 hours ago
2
Feature Highlight is a lightweight TypeScript library for visually highlighting elements on a web page, useful for onboarding, tutorials, or drawing user attention to features.
Install via npm:
npm install feature-highlight
Import the main highlight function and use it to highlight any element by selector or reference:
import { highlight, removeHighlight } from "feature-highlight";
highlight("#newFeatureButton", {
color: "#388E3C",
borderWidth: 3,
borderColor: "#fff",
opacity: 0.7,
});
// remove highlight
removeHighlight();
You can make the transition smooth by adding the appropriate css transition rules, as an example:
#hopSvg circle {
transition: 300ms linear all;
}
#hopSvg circle {
animation: bounce 800ms alternate infinite;
}
@keyframes bounce {
0% {
r: 30;
}
100% {
r: 35;
}
}
- elOrSelector: string (CSS selector) or HTMLElement
- options: Partial
- radius: number — Highlight circle radius (default: auto)
- radiusPadding: number — adjust the radius size, useful only when the radius is automatically calculated (radius: undefined)
- color: string — Highlight color (default: #388E3C)
- borderWidth: number — Border width (default: 2)
- borderColor: string — Border color (default: #fff)
- opacity: number — Highlight opacity (default: 0.8)
- cssClass: string — A css class set to the root svg element, useful for styling and animation
MIT
