Yet another internationalization library for React.js
English | 한국어
yarn add @daldalso/i18nnpx i18n init- Add
I18nInitializercomponent in your root component.I18nInitializerhave to be the first child. - Call
lexiconin any components for i18n.
You can construct your own directory structure by separating lexicon files like below:
🗀 i18n
├ 🗀 en
│ ├ common.ts
│ ├ index.ts
│ ├ sign-in.ts
│ └ sign-up.ts
└ 🗀 ko
├ common.ts
├ index.ts
├ sign-in.ts
└ sign-up.ts
You can put strings, JSX elements, arrays of them, and functions that returns one of them.
//: src/i18n/en/l.index.en.tsx
import { I18n } from "@daldalso/i18n";
export default I18n.register({
foo: "Hello, World!",
bar: <>Hello, <u>World</u>!</>,
baz: (value:number) => (
<b>{value.toLocaleString()}</b>
),
levels: [ "Level 1", "Level 2", "Level 3" ]
});//: app/page.tsx
import { lexicon } from "@daldalso/i18n";
import lIndex from "@/i18n/l.index";
export default function Index(){
const l = lexicon(lIndex);
return <ul>
<li>
{l('foo')}
</li>
<li>
{l('bar')}
</li>
<li>
{l('baz') /* causes a type error */}
{l('baz', 123)}
</li>
<li>
{l('levels')[1]}
</li>
</ul>;
}You must use await lexiconAsync(...) instead of lexicon(...) if the execution of your component precedes the execution of I18nInitializer.
This often happens when it's called directly in a page component.