README
Nano Stores I18n
Tiny and flexible JS library to make your web application translatable. Uses Nano Stores state manager and JS Internationalization API.
- Small. Between 448 and 844 bytes (minified and gzipped). Zero dependencies.
- Works with React, Preact, Vue, Svelte, and plain JS.
- Supports tree-shaking and translation on-demand download.
- Plain JSON translations compatible with online translation services like Weblate.
- Out of the box TypeScript support for translations.
- Flexible variable translations. You can change translation, for instance, depends on screen size.
// components/post.jsx
import { params, count } from '@nanostores/i18n' // You can use own functions
import { useStore } from '@nanostores/react'
import { i18n, format } from '../stores/i18n.js'
export const messages = i18n('post', {
title: 'Post details',
published: params<{ at: string }>('Was published at {at}')
posts: count({
one: '{count} comment',
many: '{count} comments'
})
})
export const Post = ({ author, comments, publishedAt }) => {
const t = useStore(messages)
const { time } = useStore(format)
return <article>
<h1>{t.title}</h1>
<p>{t.published({ at: time(publishedAt) })}</p>
<p>{t.comments(comments.length)}</p>
</article>
}
// stores/i18n.js
import { createI18n, localeFrom, browser, formatter } from '@nanostores/i18n'
import localeSettings from './locale-settings.js'
export const locale = localeFrom(
localeSettings, // User’s locale from localStorage
browser({ available: ['en', 'fr', 'ru'] }) // or browser’s locale auto-detect
)
export const format = formatter(locale)
export const i18n = createI18n(locale, {
get (code) {
return fetchJSON(`/translations/${code}.json`)
}
})
// public/translations/ru.json
{
"post": {
"title": "Данные о публикации",
"published": "Опубликован {at}",
"comments": {
"one": "{count} комментарий",
"few": "{count} комментария",
"many": "{count} комментариев",
}
},
// Translations for all other components
}
Docs
Read full docs on GitHub.