Formatjs React Intl

i18n cho React apps — react-intl, FormatJS. Dùng khi implement đa ngôn ngữ, format số/ngày/tiền tệ chuẩn theo locale.

yanacuti1121 acfdc9e 1.2 KB Updated 2 repo stars

File contents

FormatJS / react-intl là monorepo i18n chuẩn cho React. Format messages, dates, numbers, currencies theo locale.

Install

npm install react-intl

Basic setup

import { IntlProvider, FormattedMessage } from 'react-intl'

const messages = {
  'app.greeting': 'Hello, {name}!',
}

<IntlProvider locale="en" messages={messages}>
  <FormattedMessage id="app.greeting" values={{ name: 'Tâm' }} />
</IntlProvider>

Format patterns

// Number / currency
<FormattedNumber value={1000} style="currency" currency="VND" />
// → ₫1.000

// Date
<FormattedDate value={new Date()} year="numeric" month="long" day="2-digit" />

// Relative time
<FormattedRelativeTime value={-1} unit="day" />
// → yesterday

Extract & compile messages

# Extract from source
npx formatjs extract 'src/**/*.tsx' --out-file messages/en.json

# Compile for production
npx formatjs compile messages/vi.json --out-file compiled/vi.json

Source

https://github.com/formatjs/formatjs · ⭐14.7K

yanacuti1121/Yana-AI/tree/main/core/skills/formatjs--react-intl commit acfdc9e4ad

Frequently asked questions

npx skillmds add yanacuti1121/formatjs-react-intl