@synerise/ds-format-picker v0.3.111
id: format-picker
title: FormatPicker
FormatPicker UI Component
Installation
npm i @synerise/ds-format-picker
or
yarn add @synerise/ds-format-picker
Usage
import FormatPicker from '@synerise/ds-format-picker'
<FormatPicker
format={store.state.format}
value={19000.7}
onDataFormatChange={handleDataFormatChange}
onCurrencyChange={handleCurrencyChange}
onUseSeparatorChange={handleUseSeparatorChange}
onCompactNumbersChange={handleCompactNumberChange}
onFixedLengthChange={handleFixedLengthChange}
onSetDefault={handleSetDefault}
/>
Demo
API
Property | Description | Type | Default |
---|---|---|---|
format | Format configuration | FormattingValue | - |
value | Example value | number | - |
onDataFormatChange | Data format change handler | (format) => void} | - |
onCurrencyChange | Currency change handler | (currency: CurrencyType) => void | - |
onUseSeparatorChange | Use separator change handler | (useSeparator: boolean) => void} | - |
onCompactNumbersChange | Compact numbers change handler | (compactNumbers: boolean) => void} | - |
onFixedLengthChange | Fixed length change handler | (fixedLength) => void | - |
onSetDefault | Set default value of format | () => void | - |
text | Set of custom labels | Texts | - |
Texts
Property | Description | Type | Default |
---|---|---|---|
header | Header of format settings | string \ React.ReactNode | Number format |
format | Format label | string \ React.ReactNode | Format |
numeric | Numeric type of format tooltip | string \ React.ReactNode | Numeric |
cash | Cash type of format tooltip | string \ React.ReactNode | Cash |
percentage | Percentage type of format tooltip | string \ React.ReactNode | Percentage |
setDefault | Set default format button label | string \ React.ReactNode | Set default |
useSeparator | Use 1000 separator checkbox label | string \ React.ReactNode | Use 1000 separator |
compactNumbers | Compact number checkbox label | string \ React.ReactNode | Compact humbers |
FormattingValue
Property | Description | Type | Default |
---|---|---|---|
dataFormat | Format of data | FormattingDataFormat | - |
currency | Selected currency | CurrencyType | - |
useSeparator | Use 1000 separator | boolean | - |
compactNumbers | Use compact numbers | boolean | - |
fixedLength | Number of decimal places | number | - |
CurrencyType
Available values: USD
| EUR
| PLN
| JPY
FormattingDataFormat
Available values: numeric
| percent
| cash
6 days ago
9 days ago
9 days ago
17 days ago
21 days ago
30 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago