https://github.com/sanichkotikov/solid-i18n
Tiny internationalization library for SolidJS.
https://github.com/sanichkotikov/solid-i18n
npm-module npm-package solid-js
Last synced: about 1 year ago
JSON representation
Tiny internationalization library for SolidJS.
- Host: GitHub
- URL: https://github.com/sanichkotikov/solid-i18n
- Owner: SanichKotikov
- License: mit
- Created: 2021-10-18T11:57:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-17T06:14:24.000Z (almost 3 years ago)
- Last Synced: 2025-03-13T21:40:27.762Z (about 1 year ago)
- Topics: npm-module, npm-package, solid-js
- Language: TypeScript
- Homepage: https://sanichkotikov.github.io/solid-i18n-example/
- Size: 332 KB
- Stars: 37
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-i18n
Tiny internationalization library for SolidJS.
There is no goal to cover every possible cases. The library supports only basic functionality:
- String formatting with variables and markup
- Number formatting, including strings with plurals
- Date formatting
- Customization of number and date formatting presets (including defaults)
## Usage
This library uses Intl APIs (`NumberFormat`, `DateTimeFormat` and `PluralRules`), so you have to
use [polyfills](https://formatjs.io/docs/polyfills) for some outdated browsers.
```bash
npm i solid-i18n
```
### Displaying Messages
```typescript jsx
import { createI18n, I18nProvider, Text } from 'solid-i18n';
const i18n = createI18n({ language: 'en' });
function App() {
return (
{text}}
/>
)
}
```
### Plural Formatting
```typescript jsx
```
### Date Formatting
```typescript jsx
```
Note: use `{datetime, date}` for number or string values.
### Number Formatting
```typescript jsx
```
### useI18n
```typescript jsx
import { useI18n } from 'solid-i18n';
function SomeComp() {
const i18n = useI18n();
return (
{i18n.t('Page title')}
{i18n.formatNumber(99999.9, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
{i18n.formatDateTime(new Date(), { day: '2-digit', month: 'short' })}
);
}
```
### Define Messages
```typescript jsx
import { useI18n, defineMessages } from 'solid-i18n';
const messages = defineMessages({
title: { message: 'Page title' },
});
function SomeComp() {
const i18n = useI18n();
return
{i18n.t(messages.title)}
;
}
```
### Using Presets
```typescript jsx
import { createI18n, I18nProvider, Text } from 'solid-i18n';
const i18n = createI18n({
language: 'en',
presets: {
number: {
default: { minimumFractionDigits: 0, maximumFractionDigits: 0 },
fraction: { minimumFractionDigits: 2, maximumFractionDigits: 2 },
},
dateTime: {
default: { day: 'numeric', month: 'short', year: 'numeric' },
full: { day: 'numeric', month: 'long', year: 'numeric' },
simple: { day: 'numeric', month: 'short' },
},
},
});
function App() {
return (
)
}
```
```typescript jsx
{i18n.formatNumber(9999, 'fraction')}
```
## Extracting messages
Use [react-i18n-mini-parser](https://www.npmjs.com/package/react-i18n-mini-parser) for extracting default messages.
## Contributing
Please read [this documentation](https://github.com/SanichKotikov/contributing) before contributing.