Formatting

Terai provides a set of utils to format numbers, dates, displayNames, lists and relative times. All functions are based in the Intl Web API Standard.

Usage

Terai provides a set of utils for formatting, depending on the framework you're using:

useFormat: for React
getFormat: for Node

import { useTs, useFormat } from '@terai/react'
// import { getFormat } from '@terai/node'
 
export function Example() {
  const { ts } = useTs()
  const format = useFormat()
  // const format = getFormat() for Node
 
  return (
    <div>
      <p>{ts`Now is ${format.date({ value: now })}!`}</p>
    </div>
  )
}

Formatters

Numbers

Based on the Intl.NumberFormat web API standard, it enables language-sensitive number formatting.

format.number(
  value: number,
  options?: Intl.NumberFormatOptions
): string | undefined

import { useFormat } from '@terai/react'
 
export function Example() {
  const format = useFormat()
 
  const formattedCurrency = format.number(123456.789, {
    style: 'currency',
    currency: 'JPY',
  })
  // Expected output: "￥123,457"
 
  return <span>{formattedCurrency}</span>
}

For more info, check the MDN Web Docs (opens in a new tab).

Dates

Based on the Intl.NumberFormat web API standard, it enables language-sensitive date and time formatting.

format.date(
  value: number | Date,
  options?: Intl.DateTimeFormatOptions
): string | undefined

import { useFormat } from '@terai/react'
 
export function Example() {
  const format = useFormat()
 
  const formattedDate = format.number(new Date(), {
    dateStyle: 'full',
    timeStyle: 'long',
    timeZone: 'Australia/Sydney',
  })
  // Expected output: "Sunday, 20 December 2020 at 14:23:16 GMT+11"
 
  return <span>{formattedDate}</span>
}

For more info, check the MDN Web Docs (opens in a new tab).

Display Names

Based on the Intl.DisplayNames web API standard, it enables the consistent translation of language, region and script display names.

format.displayNames(
  value: string,
  options: Intl.DisplayNamesOptions
): string | undefined

import { useFormat } from '@terai/react'
 
export function Example() {
  const format = useFormat()
 
  const formattedDisplayName = format.displayNames('US', {
    type: 'region',
  })
  // Expected output: "United States"
 
  return <span>{formattedDisplayName}</span>
}

For more info, check the MDN Web Docs (opens in a new tab).

Lists

Based on the Intl.ListFormat web API standard, it enables language-sensitive list formatting.

format.list(
  value: string[],
  options: Intl.ListFormatOptions
): string

import { useFormat, useTs } from '@terai/react'
 
export function Example() {
  const format = useFormat()
  const { ts } = useTs()
 
  const vehicles = [ts`Motorcycle`, ts`Car`, ts`Truck`]
 
  const formattedList = format.list(vehicles, {
    style: 'long',
    type: 'conjunction',
  })
  // Expected output: "Motorcycle, Bus, and Truck"
 
  return <span>{formattedList}</span>
}

For more info, check the MDN Web Docs (opens in a new tab).

Relative Times

Based on the Intl.RelativeTimeFormat web API standard, it enables language-sensitive relative time formatting.

format.relativeTime(
  value: [string, string],
  options: Intl.RelativeTimeFormatOptions
): string

import { useFormat } from '@terai/react'
 
export function Example() {
  const format = useFormat()
 
  const formattedTime = format.relativeTime([3, 'quarter'], {
    style: 'short',
  })
  // Expected output: "in 3 qtrs."
 
  return <span>{formattedTime}</span>
}

For more info, check the MDN Web Docs (opens in a new tab).

Code-Splitting Variables