value-flash (Web Component)

!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.

---

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

---

Installation

$3

``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

``

---

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.

---