Formatting

Learn how to format numbers, dates, displayNames, lists and relative times using Terai.

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.

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.

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.

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.

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.

Formatting

Usage

Formatters

Numbers

Dates

Display Names

Lists

Relative Times

On this page