https://github.com/zestia/ember-rich-intl
🌍 Replace ICU Message Syntax with Ember components, for dynamic content within translation strings
https://github.com/zestia/ember-rich-intl
Last synced: 8 months ago
JSON representation
🌍 Replace ICU Message Syntax with Ember components, for dynamic content within translation strings
- Host: GitHub
- URL: https://github.com/zestia/ember-rich-intl
- Owner: zestia
- License: mit
- Created: 2023-03-21T10:27:01.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-07-04T09:47:38.000Z (12 months ago)
- Last Synced: 2025-07-04T10:39:01.345Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.75 MB
- Stars: 2
- Watchers: 12
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @zestia/ember-rich-intl
[npm-badge]: https://img.shields.io/npm/v/@zestia/ember-rich-intl.svg
[npm-badge-url]: https://www.npmjs.com/package/@zestia/ember-rich-intl
[github-actions-badge]: https://github.com/zestia/ember-rich-intl/workflows/CI/badge.svg
[github-actions-url]: https://github.com/zestia/ember-rich-intl/actions
[ember-observer-badge]: https://emberobserver.com/badges/-zestia-ember-rich-intl.svg
[ember-observer-url]: https://emberobserver.com/addons/@zestia/ember-rich-intl
This Ember addon works in conjunction with [ember-intl](https://github.com/ember-intl/ember-intl). It swaps [ICU message syntax](https://formatjs.io/docs/core-concepts/icu-syntax/#rich-text-formatting) for components, allowing for dynamic content within translated strings.
**Important note:** We recommend limiting usage of components in translation strings. The majority of the time, its possible to reword the string, or reconsider the design instead.
## Installation
```
ember install @zestia/ember-rich-intl
```
Add the following to `~/.npmrc` to pull @zestia scoped packages from Github instead of NPM.
```
@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=
```
## Demo
https://zestia.github.io/ember-rich-intl
## Example
```hbs
more' as |intl|>
{{string}}
```
## `Intl`
### Arguments
#### `@string`
Required. The text within which to find parts.
### API
When a token is found, and a component is rendered in its place, that component will will yield:
#### `string`
Optional. The matched part