Skip to content

Commit

Permalink
feat: extend numberformat to unified (#1462)
Browse files Browse the repository at this point in the history
Add documentation, extend types.
Currently this is part of [Unified NumberFormat](https://github.com/tc39/proposal-unified-intl-numberformat) which is stage 3. We've provided a polyfill [here](https://github.com/formatjs/formatjs/tree/master/packages/intl-unified-numberformat) and `react-intl` types allow users to pass in a [sanctioned unit](https://github.com/formatjs/formatjs/tree/master/packages/intl-unified-numberformat).
  • Loading branch information
longlho authored Aug 30, 2019
1 parent d194f23 commit a7f2104
Show file tree
Hide file tree
Showing 7 changed files with 70 additions and 2 deletions.
18 changes: 18 additions & 0 deletions docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,24 @@ formatNumber(0.5, {style: 'percent'}); // "50%"
formatNumber(1000, {style: 'currency', currency: 'USD'}); // $1,000
```

**Formatting Number using `unit`**

Currently this is part of [Unified NumberFormat](https://github.com/tc39/proposal-unified-intl-numberformat) which is stage 3. We've provided a polyfill [here](https://github.com/formatjs/formatjs/tree/master/packages/intl-unified-numberformat) and `react-intl` types allow users to pass in a [sanctioned unit](https://github.com/formatjs/formatjs/tree/master/packages/intl-unified-numberformat):

```js
formatNumber(1000, {
style: 'unit',
unit: 'kilobyte',
unitDisplay: 'narrow',
}); // "1,000kB"

formatNumber(1000, {
unit: 'fahrenheit',
unitDisplay: 'long',
style: 'unit',
}); // "1,000 degrees Fahrenheit"
```

#### `formatPlural`

```ts
Expand Down
30 changes: 30 additions & 0 deletions docs/Components.md
Original file line number Diff line number Diff line change
Expand Up @@ -390,6 +390,36 @@ By default `<FormattedNumber>` will render the formatted number into a `<span>`.
<span>1,000</span>
```

**Formatting Number using `unit`**

Currently this is part of [Unified NumberFormat](https://github.com/tc39/proposal-unified-intl-numberformat) which is stage 3. We've provided a polyfill [here](https://github.com/formatjs/formatjs/tree/master/packages/intl-unified-numberformat) and `react-intl` types allow users to pass in a [sanctioned unit](https://github.com/formatjs/formatjs/tree/master/packages/intl-unified-numberformat). For example:

```tsx
<FormattedNumber
value={1000}
style="unit"
unit="kilobyte"
unitDisplay="narrow"
/>
```

```html
<span>1,000kB</span>
```

```tsx
<FormattedNumber
value={1000}
unit="fahrenheit"
unitDisplay="long"
style="unit"
/>
```

```html
<span>1,000 degrees Fahrenheit</span>
```

### `FormattedNumberParts`

This component provides more customization to `FormattedNumber` by allowing children function to have access to underlying parts of the formatted date. The available parts are listed [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts)
Expand Down
7 changes: 7 additions & 0 deletions docs/Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
- [React Native](#react-native)
- [React Native on iOS](#react-native-on-ios)
- [DOMParser](#domparser-1)
- [Stage-3 Intl Features](#stage-3-intl-features)
- [Creating an I18n Context](#creating-an-i18n-context)
- [Formatting Data](#formatting-data)
- [Core Concepts](#core-concepts)
Expand Down Expand Up @@ -159,6 +160,12 @@ If you cannot use the Intl variant of JSC (e.g on iOS), follow the instructions

We also rely on `DOMParser` to format rich text, thus for JSC will need to polyfill using [xmldom](https://github.com/jindw/xmldom).

## Stage-3 Intl Features

FormatJS also provides types & polyfill for the following Stage 3 Intl APIs:

- Unified NumberFormat: [polyfill](https://www.npmjs.com/package/@formatjs/intl-unified-numberformat) & [spec](https://github.com/tc39/proposal-unified-intl-numberformat)

## Creating an I18n Context

Now with React Intl and its locale data loaded an i18n context can be created for your React app.
Expand Down
8 changes: 8 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"types": "./dist/index.d.ts",
"dependencies": {
"@formatjs/intl-relativetimeformat": "^2.8.2",
"@formatjs/intl-unified-numberformat": "^0.4.5",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/invariant": "^2.2.30",
"hoist-non-react-statics": "^3.3.0",
Expand Down
5 changes: 4 additions & 1 deletion src/formatters/number.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import {IntlConfig, Formatters, IntlFormatters} from '../types';
import {getNamedFormat, filterProps, createError} from '../utils';
import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';

const NUMBER_FORMAT_OPTIONS: Array<keyof Intl.NumberFormatOptions> = [
const NUMBER_FORMAT_OPTIONS: Array<keyof UnifiedNumberFormatOptions> = [
'localeMatcher',

'style',
'currency',
'currencyDisplay',
'unit',
'unitDisplay',
'useGrouping',

'minimumIntegerDigits',
Expand Down
3 changes: 2 additions & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import IntlRelativeTimeFormat, {
IntlRelativeTimeFormatOptions,
} from '@formatjs/intl-relativetimeformat';
import {MessageFormatElement} from 'intl-messageformat-parser';
import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';

export interface IntlConfig {
locale: string;
Expand All @@ -39,7 +40,7 @@ export type FormatDateOptions = Exclude<
> &
CustomFormatConfig;
export type FormatNumberOptions = Exclude<
Intl.NumberFormatOptions,
UnifiedNumberFormatOptions,
'localeMatcher'
> &
CustomFormatConfig;
Expand Down

0 comments on commit a7f2104

Please sign in to comment.