A lightweight Web Component that flashes when numerical values change — ideal for stock tickers, dashboards, and real-time indicators.
npm install value-flash

!license
!bundle size
!webcomponent
A lightweight Web Component (Custom Element) that provides a flash/highlight effect when a numeric value changes — similar to stock tickers, real-time dashboards, trading UIs, and KPI indicators.
The component applies a temporary flash background and optional text-color changes depending on whether the value increased or decreased.
---
- Pure Web Component — works in React, Angular, Vue, Svelte, or plain HTML
- Flash effect on value increase and value decrease
- Custom flash colors and text colors
- Optional ▲/▼ indicator arrow
- Optional label via slot ()
- No external dependencies
- Lightweight bundle
---
bash
npm install value-flash
or
yarn add value-flash
or
pnpm add value-flash
`Then import once in your app (any framework):
`js
import "value-flash"; // registers globally
`$3
`html
`Now the element is available as:
`html
`---
Basic Usage (HTML)
`html
`When the
value attribute changes, the component will flash.Example updating the value dynamically:
`html
`---
Usage with Children (Label)
`html
Apple
`---
Attributes / Properties
| Attribute / Prop | Type | Default | Description |
|------------------|------|---------|-------------|
| value |
number \| string | required | The dynamic value to watch. Updating this triggers flash. |
| duration | number | 1000 | Flash duration in ms. |
| flashColorIncrease | string | "lightgreen" | Flash background color when value increases. |
| flashColorDecrease | string | "salmon" | Flash background color when value decreases. |
| textColorIncrease | string | "green" | Text color when value increases. |
| textColorDecrease | string | "red" | Text color when value decreases. |
| flashOnly | boolean | false | Just the flash effect, does not show any color |
| showIndicator | boolean | true | Shows ▲ or ▼ arrow. |Note:
All attributes can also be set via JS properties:
`js
elem.value = 310;
elem.duration = 1500;
elem.flashOnly = true;
`
---
Example Demo (HTML)
`html
Apple
`---
Framework Integration
$3
Just import once:`js
import "value-flash";
`Then use:
`jsx
AAPL
`React will treat it as a normal DOM element.
$3
Add in
module or standalone config:`ts
schemas: [CUSTOM_ELEMENTS_SCHEMA]
`Then use:
`html
`$3
`js
import "value-flash";
`Then:
`html
``---
- Chrome, Edge, Firefox, Safari
- Works in any modern browser supporting Custom Elements v1
- No polyfills required for evergreen browsers
---
The package ships with type definitions for IDE autocompletion.
---
MIT — free for personal and commercial use.
---