Skip to content

Commit

Permalink
feat(use-i18n): add unit (byte/bit) formatter (#265)
Browse files Browse the repository at this point in the history
* feat(use-i18n): add unit (byte/bit) formatter

* fix: correct bit(s)-per-second output

* fix: remove console.log

* feat: add minimumFractionDigits

* docs: correct README
  • Loading branch information
chambo-e authored Jul 9, 2021
1 parent 3e1d985 commit 65121fd
Show file tree
Hide file tree
Showing 8 changed files with 1,559 additions and 0 deletions.
122 changes: 122 additions & 0 deletions packages/use-i18n/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,3 +159,125 @@ const App = () => {
)
}
```
### formatUnit
This hook also exposes a `formatUnit` function which can be used to format bits/bytes until [ECMA-402 Unit Preferences](https://github.com/tc39/proposal-smart-unit-preferences) is standardised
We follow the IEC standard (base 10) with SI units (kilo,mega,giga,...) [more info here](https://en.wikipedia.org/wiki/Binary_prefix)
It accepts an `options` as second parameter:
- `unit`: Manadatory (see below)
- `maximumFractionDigits`: The maximum number of fraction digits to use
- `minimumFractionDigits`: The minimum number of fraction digits to use
- `short`: if it should output the short or long form of the unit (think `Kb` vs `kilobits`)
```js
import { useI18n } from '@scaleway/use-i18n'
import { DateInput } from '@scaleway/ui'

const App = () => {
const { formatUnit } = useI18n()

const units = [
formatUnit(12 { unit: 'kilobyte' }) // "12 KB" or "12 Ko" in fr an ro
formatUnit(10 ** 8 { unit: 'bytes-humanized' }) // "100 MB" or "100 Mo" in fr an ro
formatUnit(10 ** 8 { unit: 'bits-per-second-humanized' }) // "100Mbs"
]

return (
<div>
{units}
</div>
)
}
```
We currently support two different unit:
- byte
- bit
With each some variants :
- `(kilo|mega|giga|tera|peta|exa|zetta|yotta)(bit|byte)`: This is the bare unit
- `formatUnit(12, { unit: 'megabyte' })` => `"12 MB"` or `"12 Mo"` (in fr/ro)
- `formatUnit(12, { unit: 'kilobit' })` => `"12 Kb"`
- `formatUnit(12, { unit: 'gigabit' })` => `"12 Gb"`
- `formatUnit(12, { unit: 'byte' })` => `"12 B"` or `"12 o"` (in fr/ro)
- `(byte|bit)s-humanized`: This is an automated unit which will print a human readable value
- `formatUnit(1234567, { unit: 'bytes-humanized' })` => `"1.23 MB"` or `"1.23 Mo"` (in fr/ro)
- `(kilo|mega|giga|tera|peta|exa|zetta|yotta)(bit|byte)(byte|bit)-humanized`: This is also an automated unit which will print a human readable value but in the unit specified
- `formatUnit(123456789, { unit: 'gigabyte-humanized' })` => `"0.12 GB"` or `"0.12 Go"` (in fr/ro)
- `formatUnit(123456789, { unit: 'kilobyte-humanized' })` => `"123456.78 KB"` or `"123456.78 Ko"` (in fr/ro)
There is also a compound variant which can only be used with bits:
- `(kilo|mega|giga|tera|peta|exa|zetta|yotta)bit-per-second`
- `formatUnit(1.6, { unit: 'gigabit-per-second' })` => `1.6 Gbps`
- `formatUnit(1.6, { unit: 'bit-per-second' })` => `1.6 bps`
- `bits-per-second-humanized`: Automated unit
- `formatUnit(123456789, { unit: 'bits-per-second-humanized' })` => `123.46 Mbps`
- `(kilo|mega|giga|tera|peta|exa|zetta|yotta)bit-per-second-humanized`: Humandreadable value in the unit specified
- `formatUnit(123456789, { unit: 'gigabit-per-second-humanized' })` => `0.12 Gbps`
- `formatUnit(123456789, { unit: 'kilobit-per-second-humanized' })` => `123456.78 Kbps`
Here is the full list of available units:
```
bits-humanized
bits-per-second-humanized
bit
bit-per-second
bit-humanized
bit-per-second-humanized
kilobit
kilobit-per-second
kilobit-humanized
kilobit-per-second-humanized
megabit
megabit-per-second
megabit-humanized
megabit-per-second-humanized
gigabit
gigabit-per-second
gigabit-humanized
gigabit-per-second-humanized
terabit
terabit-per-second
terabit-humanized
terabit-per-second-humanized
petabit
petabit-per-second
petabit-humanized
petabit-per-second-humanized
exabit
exabit-per-second
exabit-humanized
exabit-per-second-humanized
zettabit
zettabit-per-second
zettabit-humanized
zettabit-per-second-humanized
yottabit
yottabit-per-second
yottabit-humanized
yottabit-per-second-humanized
bytes-humanized
byte
byte-humanized
kilobyte
kilobyte-humanized
megabyte
megabyte-humanized
gigabyte
gigabyte-humanized
terabyte
terabyte-humanized
petabyte
petabyte-humanized
exabyte
exabyte-humanized
zettabyte
zettabyte-humanized
yottabyte
yottabyte-humanized
```
1 change: 1 addition & 0 deletions packages/use-i18n/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"license": "MIT",
"dependencies": {
"date-fns": "^2.19.0",
"filesize": "^6.4.0",
"intl-format-cache": "^4.3.1",
"intl-messageformat": "^9.5.3",
"intl-pluralrules": "^1.2.2",
Expand Down
Loading

0 comments on commit 65121fd

Please sign in to comment.