# preact-jsx-i18n 🌎 [](https://npm.im/preact-jsx-i18n) [](https://travis-ci.org/apyos/preact-jsx-i18n) [](https://app.fossa.io/projects/git%2Bgithub.com%2Fapyos%2Fpreact-jsx-i18n?ref=badge_shield)
**Localization for Preact using JSX components**
This library makes it possible to use JSX components as localization inputs. This may seem messy, but is actually very useful in practice. For simple JSON texts with variables that render to strings, [preact-localization](https://github.com/apyos/preact-localization) or [preact-i18n](https://github.com/synacor/preact-i18n) are still options.
This tool is particularly interesting when used in conjunction with [string-to-jsx-loader](https://github.com/apyos/string-to-jsx-loader). The two tools combined provide a good compromise between simple translation files and flexibility.
## Install
```
$ npm install -S preact-jsx-i18n
```
## Getting Started
1. Create a dictionary. Typically JSON files, we'll call ours `fr.js`:
```jsx
module.exports = {
news: {
title: Nouvelles du Monde,
totalStories: {
none: [Aucun, ' article'],
one: 'Un article',
many: ({ count }) => [count, 'articles'],
},
},
}
```
2. Expose the dictionary to your whole app via ``:
```jsx
import { IntlProvider } from 'preact-jsx-i18n'
import dictionary from './fr'
render(
)
```
3. Use `` to translate string literals:
```jsx
import { Text } from 'preact-jsx-i18n'
// Assume the "stories" prop is a list of news stories.
const App = ({ stories = [] }) => (
{/* Default fallback text example: */}
World News
)
```
That's it!
### JSX
As seen in the examples, the `dictionary` can either:
- Be a single JSX component
- Be a single string
- Be an array of JSX components and strings
If the text requires a variable, a function needs to be returned.
### Fallback Text
Rendering our example app with an empty dictionary _(or without the Provider)_ will attempt to use any text contained within `..` as fallback text.
In our example, this would mean rendering without a dictionary for `news.title` would produce `
World News
`.
If we provide a dictionary that has a `title` key inside a `news` object, that value will be rendered instead.
### Pluralization and Templating
In our example, `