useFormatByte

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

インポート

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

Copied!

使い方

useFormatByteは、バイト値の大きさに基づいて最適な単位(B, KB, MB, GB, TB)を自動的に選択します。

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

useFormatByteは、navigator.languageに基づいてlocaleを自動的に設定します。

編集可能な例

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

return (
  <VStack gap="sm">
    <Text>{kilobyte}</Text>
    <Text>{megabyte}</Text>
    <Text>{gigabyte}</Text>
    <Text>{terabyte}</Text>
  </VStack>
)

Copied!

ロケールを変更する

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

編集可能な例

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>
)

Copied!

コンフィグからカスタマイズする

アプリケーション全体のロケールの設定をしたい場合は、コンフィグをカスタマイズします。

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

const customConfig = extendConfig({
  locale: "ja-JP",
})

const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}

Copied!

コンフィグをもっと学びたい場合は、コンフィグをカスタマイズするをご覧ください。

単位を変換する

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

編集可能な例

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>
)

Copied!

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

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

編集可能な例

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>
)

Copied!

GitHubでこのページを編集する

前useDynamicAnimation 次useFormatNumber