BranchesTags

Repository files navigation

@lab49/react-value-flash

codecov.github/workflows/cicd.ymlnpm versionContributor Covenant

Flash on value change. Perfect for financial applications.

react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.

Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.

Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.

Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.

This component is perfect for:

  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards

Features

  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals

Table of contents

Demo

Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/

You can also run the demo locally. To get started:

git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top

Installation

npm install @lab49/react-value-flash
⇡ Top

Usage

import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>

As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:

ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top

API

Flash

<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.

import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;

Props

interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}

FlashDirection

enumFlashDirection{Down='down',Up='up',}
⇡ Top

License

MIT @ Lab49

⇡ Top

Sponsored by Lab49

About

React component to flash numbers based on value changes. Perfect for financial applications.

main--5f3fca6e6b5eba0022c71e4e.chromatic.com/

Topics

financefintechjavascriptreactrealtimestreamingtypescript

Resources

Readme
MIT license

Code of conduct

Code of conduct
Activity
Custom properties

Stars

13 stars

Watchers

0 watching

Forks

4 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
@lab49/react-value-flash
codecov.github/workflows/cicd.ymlnpm versionContributor Covenant
Flash on value change. Perfect for financial applications.
react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.
Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.
Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.
Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
This component is perfect for:
  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards
Features
  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals
Table of contents
Demo
Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top
Installation
npm install @lab49/react-value-flash
⇡ Top
Usage
import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>
As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:
ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top
API
Flash
<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.
import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;
Props
interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}
FlashDirection
enumFlashDirection{Down='down',Up='up',}
⇡ Top
License
MIT @ Lab49
⇡ Top
Sponsored by Lab49
About
React component to flash numbers based on value changes. Perfect for financial applications.
main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
Topics
financefintechjavascriptreactrealtimestreamingtypescript
Resources
Readme
MIT license
Code of conduct
Code of conduct
Activity
Custom properties
Stars
13 stars
Watchers
0 watching
Forks
4 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
@lab49/react-value-flash
codecov.github/workflows/cicd.ymlnpm versionContributor Covenant
Flash on value change. Perfect for financial applications.
react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.
Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.
Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.
Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
This component is perfect for:
  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards
Features
  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals
Table of contents
Demo
Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top
Installation
npm install @lab49/react-value-flash
⇡ Top
Usage
import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>
As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:
ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top
API
Flash
<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.
import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;
Props
interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}
FlashDirection
enumFlashDirection{Down='down',Up='up',}
⇡ Top
License
MIT @ Lab49
⇡ Top
Sponsored by Lab49
About
React component to flash numbers based on value changes. Perfect for financial applications.
main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
Topics
financefintechjavascriptreactrealtimestreamingtypescript
Resources
Readme
MIT license
Code of conduct
Code of conduct
Activity
Custom properties
Stars
13 stars
Watchers
0 watching
Forks
4 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
@lab49/react-value-flash
codecov.github/workflows/cicd.ymlnpm versionContributor Covenant
Flash on value change. Perfect for financial applications.
react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.
Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.
Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.
Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
This component is perfect for:
  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards
Features
  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals
Table of contents
Demo
Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top
Installation
npm install @lab49/react-value-flash
⇡ Top
Usage
import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>
As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:
ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top
API
Flash
<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.
import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;
Props
interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}
FlashDirection
enumFlashDirection{Down='down',Up='up',}
⇡ Top
License
MIT @ Lab49
⇡ Top
Sponsored by Lab49
About
React component to flash numbers based on value changes. Perfect for financial applications.
main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
Topics
financefintechjavascriptreactrealtimestreamingtypescript
Resources
Readme
MIT license
Code of conduct
Code of conduct
Activity
Custom properties
Stars
13 stars
Watchers
0 watching
Forks
4 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
@lab49/react-value-flash
codecov.github/workflows/cicd.ymlnpm versionContributor Covenant
Flash on value change. Perfect for financial applications.
react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.
Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.
Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.
Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
This component is perfect for:
  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards
Features
  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals
Table of contents
Demo
Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top
Installation
npm install @lab49/react-value-flash
⇡ Top
Usage
import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>
As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:
ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top
API
Flash
<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.
import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;
Props
interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}
FlashDirection
enumFlashDirection{Down='down',Up='up',}
⇡ Top
License
MIT @ Lab49
⇡ Top
Sponsored by Lab49
About
React component to flash numbers based on value changes. Perfect for financial applications.
main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
Topics
financefintechjavascriptreactrealtimestreamingtypescript
Resources
Readme
MIT license
Code of conduct
Code of conduct
Activity
Custom properties
Stars
13 stars
Watchers
0 watching
Forks
4 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
@lab49/react-value-flash
codecov.github/workflows/cicd.ymlnpm versionContributor Covenant
Flash on value change. Perfect for financial applications.
react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.
Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.
Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.
Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
This component is perfect for:
  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards
Features
  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals
Table of contents
Demo
Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top
Installation
npm install @lab49/react-value-flash
⇡ Top
Usage
import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>
As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:
ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top
API
Flash
<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.
import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;
Props
interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}
FlashDirection
enumFlashDirection{Down='down',Up='up',}
⇡ Top
License
MIT @ Lab49
⇡ Top
Sponsored by Lab49
About
React component to flash numbers based on value changes. Perfect for financial applications.
main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
Topics
financefintechjavascriptreactrealtimestreamingtypescript
Resources
Readme
MIT license
Code of conduct
Code of conduct
Activity
Custom properties
Stars
13 stars
Watchers
0 watching
Forks
4 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
@lab49/react-value-flash
codecov.github/workflows/cicd.ymlnpm versionContributor Covenant
Flash on value change. Perfect for financial applications.
react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.
Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.
Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.
Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
This component is perfect for:
  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards
Features
  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals
Table of contents
Demo
Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top
Installation
npm install @lab49/react-value-flash
⇡ Top
Usage
import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>
As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:
ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top
API
Flash
<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.
import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;
Props
interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}
FlashDirection
enumFlashDirection{Down='down',Up='up',}
⇡ Top
License
MIT @ Lab49
⇡ Top
Sponsored by Lab49
About
React component to flash numbers based on value changes. Perfect for financial applications.
main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
Topics
financefintechjavascriptreactrealtimestreamingtypescript
Resources
Readme
MIT license
Code of conduct
Code of conduct
Activity
Custom properties
Stars
13 stars
Watchers
0 watching
Forks
4 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
@lab49/react-value-flash
codecov.github/workflows/cicd.ymlnpm versionContributor Covenant
Flash on value change. Perfect for financial applications.
react-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.
Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.
Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.
Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
This component is perfect for:
  • Trading platforms
  • Analytics dashboards
  • Monitoring dashboards
Features
  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals
Table of contents
Demo
Hosted demo: https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
⇡ Top
Installation
npm install @lab49/react-value-flash
⇡ Top
Usage
import{Flash}from'@lab49/react-value-flash';<Flashvalue={20_000}>
As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the include Storybook, but as an example, here's a description of the available classnames:
ClassDescription
.rvf_FlashRoot DOM node
.rvf_Flash__valueRendered value, direct (and only) child of the root node.
.rvf_Flash--flashingApplied only when the component is in the flashing state.
.rvf_Flash--flashing-upApplied when flashing 'up'.
.rvf_Flash--flashing-downApplied when flashing 'down'.
.rvf_Flash--positiveApplied when the value is positive.
.rvf_Flash--negativeApplied when the value is negative.
⇡ Top
API
Flash
<Flash /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.
import{Flash}from'@lab49/react-value-flash';constMyComponent=()=><Flashvalue={1}/>;
Props
interfaceProps{/** * Color value when the component flashes 'down'. */downColor?: string;/** * One of the built in formatters. */formatter?: 'currency'|'percentage'|'number';/** * Pass your own formatter function. */formatterFn?: Formatter;/** * Prefix for the CSS selectors in the DOM. */stylePrefix?: string;/** * Amount of time the flashed state is visible for, in milliseconds. */timeout?: number;/** * Custom CSS transition property. */transition?: string;/** * Transition length, in milliseconds. */transitionLength?: number;/** * Color value when the component flashes 'up'. */upColor?: string;/** * Value to display. The only required prop. */value: number;}
FlashDirection
enumFlashDirection{Down='down',Up='up',}
⇡ Top
License
MIT @ Lab49
⇡ Top
Sponsored by Lab49
About
React component to flash numbers based on value changes. Perfect for financial applications.
main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
Topics
financefintechjavascriptreactrealtimestreamingtypescript
Resources
Readme
MIT license
Code of conduct
Code of conduct
Activity
Custom properties
Stars
13 stars
Watchers
0 watching
Forks
4 forks
Report repository
Releases
Packages
Used by
Contributors
Languages