Skip to content

Commit 65121fd

Browse files
authored
feat(use-i18n): add unit (byte/bit) formatter (#265)
* 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
1 parent 3e1d985 commit 65121fd

File tree

8 files changed

+1559
-0
lines changed

8 files changed

+1559
-0
lines changed

packages/use-i18n/README.md

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,3 +159,125 @@ const App = () => {
159159
)
160160
}
161161
```
162+
163+
### formatUnit
164+
165+
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
166+
167+
We follow the IEC standard (base 10) with SI units (kilo,mega,giga,...) [more info here](https://en.wikipedia.org/wiki/Binary_prefix)
168+
169+
It accepts an `options` as second parameter:
170+
- `unit`: Manadatory (see below)
171+
- `maximumFractionDigits`: The maximum number of fraction digits to use
172+
- `minimumFractionDigits`: The minimum number of fraction digits to use
173+
- `short`: if it should output the short or long form of the unit (think `Kb` vs `kilobits`)
174+
175+
176+
```js
177+
import { useI18n } from '@scaleway/use-i18n'
178+
import { DateInput } from '@scaleway/ui'
179+
180+
const App = () => {
181+
const { formatUnit } = useI18n()
182+
183+
const units = [
184+
formatUnit(12 { unit: 'kilobyte' }) // "12 KB" or "12 Ko" in fr an ro
185+
formatUnit(10 ** 8 { unit: 'bytes-humanized' }) // "100 MB" or "100 Mo" in fr an ro
186+
formatUnit(10 ** 8 { unit: 'bits-per-second-humanized' }) // "100Mbs"
187+
]
188+
189+
return (
190+
<div>
191+
{units}
192+
</div>
193+
)
194+
}
195+
```
196+
197+
We currently support two different unit:
198+
- byte
199+
- bit
200+
201+
With each some variants :
202+
- `(kilo|mega|giga|tera|peta|exa|zetta|yotta)(bit|byte)`: This is the bare unit
203+
- `formatUnit(12, { unit: 'megabyte' })` => `"12 MB"` or `"12 Mo"` (in fr/ro)
204+
- `formatUnit(12, { unit: 'kilobit' })` => `"12 Kb"`
205+
- `formatUnit(12, { unit: 'gigabit' })` => `"12 Gb"`
206+
- `formatUnit(12, { unit: 'byte' })` => `"12 B"` or `"12 o"` (in fr/ro)
207+
- `(byte|bit)s-humanized`: This is an automated unit which will print a human readable value
208+
- `formatUnit(1234567, { unit: 'bytes-humanized' })` => `"1.23 MB"` or `"1.23 Mo"` (in fr/ro)
209+
- `(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
210+
- `formatUnit(123456789, { unit: 'gigabyte-humanized' })` => `"0.12 GB"` or `"0.12 Go"` (in fr/ro)
211+
- `formatUnit(123456789, { unit: 'kilobyte-humanized' })` => `"123456.78 KB"` or `"123456.78 Ko"` (in fr/ro)
212+
213+
There is also a compound variant which can only be used with bits:
214+
- `(kilo|mega|giga|tera|peta|exa|zetta|yotta)bit-per-second`
215+
- `formatUnit(1.6, { unit: 'gigabit-per-second' })` => `1.6 Gbps`
216+
- `formatUnit(1.6, { unit: 'bit-per-second' })` => `1.6 bps`
217+
- `bits-per-second-humanized`: Automated unit
218+
- `formatUnit(123456789, { unit: 'bits-per-second-humanized' })` => `123.46 Mbps`
219+
- `(kilo|mega|giga|tera|peta|exa|zetta|yotta)bit-per-second-humanized`: Humandreadable value in the unit specified
220+
- `formatUnit(123456789, { unit: 'gigabit-per-second-humanized' })` => `0.12 Gbps`
221+
- `formatUnit(123456789, { unit: 'kilobit-per-second-humanized' })` => `123456.78 Kbps`
222+
223+
224+
Here is the full list of available units:
225+
```
226+
bits-humanized
227+
bits-per-second-humanized
228+
bit
229+
bit-per-second
230+
bit-humanized
231+
bit-per-second-humanized
232+
kilobit
233+
kilobit-per-second
234+
kilobit-humanized
235+
kilobit-per-second-humanized
236+
megabit
237+
megabit-per-second
238+
megabit-humanized
239+
megabit-per-second-humanized
240+
gigabit
241+
gigabit-per-second
242+
gigabit-humanized
243+
gigabit-per-second-humanized
244+
terabit
245+
terabit-per-second
246+
terabit-humanized
247+
terabit-per-second-humanized
248+
petabit
249+
petabit-per-second
250+
petabit-humanized
251+
petabit-per-second-humanized
252+
exabit
253+
exabit-per-second
254+
exabit-humanized
255+
exabit-per-second-humanized
256+
zettabit
257+
zettabit-per-second
258+
zettabit-humanized
259+
zettabit-per-second-humanized
260+
yottabit
261+
yottabit-per-second
262+
yottabit-humanized
263+
yottabit-per-second-humanized
264+
bytes-humanized
265+
byte
266+
byte-humanized
267+
kilobyte
268+
kilobyte-humanized
269+
megabyte
270+
megabyte-humanized
271+
gigabyte
272+
gigabyte-humanized
273+
terabyte
274+
terabyte-humanized
275+
petabyte
276+
petabyte-humanized
277+
exabyte
278+
exabyte-humanized
279+
zettabyte
280+
zettabyte-humanized
281+
yottabyte
282+
yottabyte-humanized
283+
```

packages/use-i18n/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"license": "MIT",
2828
"dependencies": {
2929
"date-fns": "^2.19.0",
30+
"filesize": "^6.4.0",
3031
"intl-format-cache": "^4.3.1",
3132
"intl-messageformat": "^9.5.3",
3233
"intl-pluralrules": "^1.2.2",

0 commit comments

Comments
 (0)