useFormatByte

useFormatByteは、バイトをフォーマットするカスタムフックです。

1.02 KB

1.05 MB

1.07 GB

1.1 TB

const kilobyte = useFormatByte(1024)
const megabyte = useFormatByte(1024 * 1024)
const gigabyte = useFormatByte(1024 * 1024 * 1024)
const terabyte = useFormatByte(1024 * 1024 * 1024 * 1024)

return (
  <>
    <Text>{kilobyte}</Text>
    <Text>{megabyte}</Text>
    <Text>{gigabyte}</Text>
    <Text>{terabyte}</Text>
  </>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { useFormatByte } from "@yamada-ui/react"

import { useFormatByte } from "@/components/ui"

import { useFormatByte } from "@workspaces/ui"

const kilobyte = useFormatByte(1024)

FormatByteは、バイト値の大きさに基づいて最適な単位（byte、kB、MB、GB、TB）を自動的に選択します。

useFormatByteは、内部でIntl.NumberFormatを使用しています。

ロケールを変更する

ロケールを変更する場合は、localeに値を設定します。

en-US

1.02 kB

ja-JP

1.02 KB

de-DE

1,02 kB

const enByte = useFormatByte(1024, { locale: "en-US" })
const jaByte = useFormatByte(1024, { locale: "ja-JP" })
const deByte = useFormatByte(1024, { locale: "de-DE" })

return (
  <Grid templateColumns="auto 1fr" gap="sm">
    <Text fontWeight="semibold">en-US</Text>
    <Text>{enByte}</Text>

    <Text fontWeight="semibold">ja-JP</Text>
    <Text>{jaByte}</Text>

    <Text fontWeight="semibold">de-DE</Text>
    <Text>{deByte}</Text>
  </Grid>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

プロジェクト全体のロケールを設定する

アプリケーション全体のロケールの設定をする場合は、UIProviderのlocaleに値を設定します。

import { UIProvider } from "@yamada-ui/react"

const App = () => {
  return (
    <UIProvider locale="ja-JP">
      <YourComponent />
    </UIProvider>
  )
}

単位を変更する

単位を変換する場合は、unitに"byte"または"bit"を設定します。デフォルトでは、"byte"が設定されています。

Bytes

1.02 KB

Bits

1.02 kb

const bytes = useFormatByte(1024, { unit: "byte" })
const bits = useFormatByte(1024, { unit: "bit" })

return (
  <Grid templateColumns="auto 1fr" gap="sm">
    <Text fontWeight="semibold">Bytes</Text>
    <Text>{bytes}</Text>

    <Text fontWeight="semibold">Bits</Text>
    <Text>{bits}</Text>
  </Grid>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

単位の表示形式を変更する

単位の表示形式を変更する場合は、unitDisplayに値を設定します。

Short

1.02 KB

Narrow

1.02KB

Long

1.02 キロバイト

const short = useFormatByte(1024, { unitDisplay: "short" })
const narrow = useFormatByte(1024, { unitDisplay: "narrow" })
const long = useFormatByte(1024, { unitDisplay: "long" })

return (
  <Grid templateColumns="auto 1fr" gap="sm">
    <Text fontWeight="semibold">Short</Text>
    <Text>{short}</Text>

    <Text fontWeight="semibold">Narrow</Text>
    <Text>{narrow}</Text>

    <Text fontWeight="semibold">Long</Text>
    <Text>{long}</Text>
  </Grid>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。