Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baptistelambert/hyperapp-intl
🌐 Internationalize hyperapp web applications.
https://github.com/baptistelambert/hyperapp-intl
hyperapp i18n intl-messageformat
Last synced: 26 days ago
JSON representation
🌐 Internationalize hyperapp web applications.
- Host: GitHub
- URL: https://github.com/baptistelambert/hyperapp-intl
- Owner: baptistelambert
- License: mit
- Created: 2018-02-22T21:29:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-22T21:47:10.000Z (almost 7 years ago)
- Last Synced: 2024-09-16T13:19:29.085Z (4 months ago)
- Topics: hyperapp, i18n, intl-messageformat
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/hyperapp-intl
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hyperapp-intl
Internationalize hyperapp web applications.
Inspired by [react-intl](https://github.com/yahoo/react-intl).
## Installation
```
npm install hyperapp-intl
# or with yarn
yarn add hyperapp-intl
```
## Usage
### Using createFormattedMessage (recommended)
By using `createFormattedMessage`, you can directly provide an object with the translations you'll be using with a FormattedMessage component, as well as a default locale.
```js
import { h, app } from 'hyperapp';
import { createFormattedMessage } from 'hyperapp-intl';
// Create an object of translations
// The keys of the object must be the same as the locale names you'll use
const translations = {
en: {
HELLO: 'Hello !',
// You can also format translations
PHOTOS: `{name} took {numPhotos, plural
=0 {no photos}
=1 {one photo}
other {# photos}
} on {takenDate, date, long}.`
},
fr: {
HELLO: 'Bonjour !',
PHOTOS: `{name} {numPhotos, plural,
=0 {n'a pris aucune photo}
=1 {a pris une photo}
other {a pris # photos}
} le {takenDate, date, long}.`
}
};
// If you want to control the locale of the app you'll have to use the state of the app
const state = {
locale: 'en'
};
// You will also have to define an action to control the locale
const actions = {
setLocale: locale => state => ({ locale })
};
// Create the component you'll use throughout your app
// Set the translations parameters with your translation object and/or a default locale
const FormattedMessage = createFormattedMessage({
translations,
defaultLocale: 'en'
});
const view = (state, actions) => (
{/* These buttons control the locale in the state */}
actions.setLocale('en')}>EN
actions.setLocale('fr')}>FR
{message}}
/>
{message}}
/>
);
app(state, actions, view, document.getElementById('root'));
```
### Using the FormattedMessage component
If you want, you can also directly use the FormattedMessage component from the package, but you will have to provide it the locale and the translations object as props.
```js
import { h, app } from 'hyperapp';
import { FormattedMessage } from 'hyperapp-intl';
const translations = {
en: {
HELLO: 'Hello !',
PHOTOS: `{name} took {numPhotos, plural,
=0 {no photos}
=1 {one photo}
other {# photos}
} on {takenDate, date, long}.`
},
fr: {
HELLO: 'Bonjour !',
PHOTOS: `{name} {numPhotos, plural,
=0 {n'a pris aucune photo}
=1 {a pris une photo}
other {a pris # photos}
} le {takenDate, date, long}.`
}
};
const state = {
locale: 'en'
};
const actions = {
setLocale: locale => state => ({ locale })
};
const view = (state, actions) => (
actions.setLocale('en')}>EN
actions.setLocale('fr')}>FR
{message}}
/>
{message}}
/>
);
app(state, actions, view, document.getElementById('root'));
```
## Message Formatting
This package uses [intl-messageformat](https://github.com/yahoo/intl-messageformat) under the hood.
If you want to know more about message formatting using this lib, I recommend you to go see their [documentation](https://formatjs.io/guides/message-syntax/).