Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[VEG-2483] Update docs to reflect react scaffold update #18

Merged
merged 1 commit into from
Oct 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -190,10 +190,6 @@ taking note of the created filename.

For more information on the Zendesk CLI please see the [documentation](https://developer.zendesk.com/documentation/apps/app-developer-guide/zcli/).

## External Dependencies

External dependencies are defined in [webpack.config.js](https://github.com/zendesk/app_scaffolds/blob/master/packages/react/webpack.config.js). This ensures these dependencies are included in your app's `index.html`.

## Contribute

- Put up a PR into the master branch.
Expand Down
62 changes: 62 additions & 0 deletions packages/react/doc/i18n.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
## Using the I18n module

The `useI18n` hook can be used to translate strings based on the current user's locale settings.

### Setup

Put a `defaultLocale` property into your `manifest.json` file, otherwise it will use english (en)

Add your translation files as `src/translations/XX.json` where `XX` is a locale such as `en-US`, `de`, or `zh`.

A simple translation file might look like this:

```json
{
"hello": "Hello!",
"goodbye": "Bye {{name}}!",
"formal": {
"farewell": "Farewell, friend."
}
}
```

The "app" section in translation files is used *only* for public app listings in the Zendesk Marketplace. For these listings, we only allow English. The "app" sections in other translation files will be ignored.

### Initialization

When you know which locale you want to use, call `useI18n`. An example of this can be found in the `/src/app/locations/Modal.jsx` component, where the `modal.title` will be translated.

```javascript
import { XL } from '@zendeskgarden/react-typography'
import { useI18n } from '../hooks/useI18n'

const Modal = () => {
const { t } = useI18n()
return <XL isBold>{t('modal.title')}</XL>
}

export default Modal
```

## Reference

### i18n.t(key, context)

Returns a translated string using a key that is available in the relevant translation file (found in `src/translations/XX.json`).

#### Arguments

* `key`: The key assigned to the string in the JSON file. Dots may be used to access nested objects.
* `context`: An object with named values to be interpolated into the resulting string.

#### Returns

A translated string generated by keying into the JSON file and interpolating any placeholders.

#### Example

```javascript
i18n.t('hello'); // returns "Hello!"
i18n.t('goodbye', { name: 'Yak' }); // returns "Bye Yak!"
i18n.t('formal.farewell'); // returns "Farewell, friend."
```
Loading