value-flash (Web Component)

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.

Features

• 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 (<value-flash>Apple</value-flash>)
• No external dependencies
• Lightweight bundle

Installation

Using npm

npm install value-flash
# or
yarn add value-flash
# or
pnpm add value-flash

Then import once in your app (any framework):

import "value-flash";  // registers <value-flash> globally

Using CDN (no build tools required)

<script src="https://unpkg.com/value-flash/dist/index.js"></script>

Now the element is available as:

<value-flash></value-flash>

Basic Usage (HTML)

<value-flash value="120" duration="1000"></value-flash>

When the value attribute changes, the component will flash.

Example updating the value dynamically:

<script>
  const elem = document.querySelector("value-flash");
  setInterval(() => {
    elem.value = (Math.random() * 100).toFixed(2);
  }, 1500);
</script>

Usage with Children (Label)

<value-flash value="150" duration="500">
  Apple
</value-flash>

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:

elem.value = 310;
elem.duration = 1500;
elem.flashOnly = true;

Example Demo (HTML)

<value-flash id="price" value="100" flashColorIncrease="lime" flashColorDecrease="orange">
  Apple
</value-flash>

<script>
  const el = document.getElementById("price");
  let v = 100;

  setInterval(() => {
    v += Math.random() > 0.5 ? 1 : -1;
    el.value = v;
  }, 1200);
</script>

Framework Integration

React

Just import once:

import "value-flash";

Then use:

<value-flash value={price} duration={800}>AAPL</value-flash>

React will treat it as a normal DOM element.

Angular

Add in module or standalone config:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Then use:

<value-flash [value]="price"></value-flash>

Vue

import "value-flash";

Then:

<value-flash :value="price"></value-flash>

Browser Support

• Chrome, Edge, Firefox, Safari
• Works in any modern browser supporting Custom Elements v1
• No polyfills required for evergreen browsers

TypeScript

The package ships with type definitions for IDE autocompletion.

License

MIT — free for personal and commercial use.