https://github.com/lab49/react-value-flash
React component to flash numbers based on value changes. Perfect for financial applications.
https://github.com/lab49/react-value-flash
finance fintech javascript react realtime streaming typescript
Last synced: about 1 year ago
JSON representation
React component to flash numbers based on value changes. Perfect for financial applications.
- Host: GitHub
- URL: https://github.com/lab49/react-value-flash
- Owner: lab49
- License: mit
- Created: 2020-08-07T19:11:48.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-07-20T17:26:17.000Z (almost 3 years ago)
- Last Synced: 2024-01-29T22:45:41.342Z (over 2 years ago)
- Topics: finance, fintech, javascript, react, realtime, streaming, typescript
- Language: TypeScript
- Homepage: https://main--5f3fca6e6b5eba0022c71e4e.chromatic.com/
- Size: 4.7 MB
- Stars: 12
- Watchers: 1
- Forks: 4
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @lab49/react-value-flash
[](https://codecov.io/gh/lab49/react-value-flash) [](https://github.com/lab49/react-value-flash/actions/workflows/cicd.yml) [](https://www.npmjs.com/package/@lab49/react-value-flash) [](code_of_conduct.md)
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](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [`Flash`](#Flash)
- [`Props`](#Props)
- [`FlashDirection`](#FlashDirection)
- [License](#License)
- [TODO](#TODO)
## Demo
Hosted demo: [https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/](https://master--5f3fca6e6b5eba0022c71e4e.chromatic.com/)
You can also run the demo locally. To get started:
```sh
git clone git@github.com:lab49/react-value-flash.git
npm install
npm run storybook
```
###### [⇡ Top](#table-of-contents)
## Installation
```sh
npm install @lab49/react-value-flash
```
###### [⇡ Top](#table-of-contents)
## Usage
```js
import { Flash } from '@lab49/react-value-flash';
```
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](./stories/Flash.stories.tsx), but as an example, here's a description of the available classnames:
| Class | Description |
| --- | --- |
| `.rvf_Flash` | Root DOM node |
| `.rvf_Flash__value` | Rendered value, direct (and only) child of the root node. |
| `.rvf_Flash--flashing` | Applied only when the component is in the flashing state. |
| `.rvf_Flash--flashing-up` | Applied when flashing 'up'. |
| `.rvf_Flash--flashing-down` | Applied when flashing 'down'. |
| `.rvf_Flash--positive` | Applied when the value is positive. |
| `.rvf_Flash--negative` | Applied when the value is negative. |
###### [⇡ Top](#table-of-contents)
## API
### `Flash`
`` is a `(props: Props) => JSX.Element`. See `Props` below for a description of the avilable props.
```ts
import { Flash } from '@lab49/react-value-flash';
const MyComponent = () => ;
```
### `Props`
```ts
interface Props {
/**
* 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`
```ts
enum FlashDirection {
Down = 'down',
Up = 'up',
}
```
###### [⇡ Top](#table-of-contents)
## License
MIT @ [Lab49](https://lab49.com)
###### [⇡ Top](#table-of-contents)
## Sponsored by Lab49
