mattermost / mattermost/mattermost-developer-documentation

Help Wanted: Document how to use custom i18n translations in a webapp plugin

Open
#1,070 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

difficulty/2:Medium Help Wanted Needs Documentation Up For Grabs
Dominant language
CSS
Stars
90
Forks
460
Avg merge
9d 23h
Merged PRs (30d)
2

Description

Mattermost user michael.kochell from https://community-daily.mattermost.com has requested the following be documented:

We should have this documented somewhere, but you will need to do two things to get webapp plugin translations working:

- Call [registerTranslations](https://developers.mattermost.com/integrate/plugins/webapp/reference/#registerTranslations) to register your translation strings
- Use webpack externals to make sure the plugin uses the same instance of `react-intl` 
[mattermost/mattermost-plugin-playbooks/webapp/webpack.config.js](https://github.com/mattermost/mattermost-plugin-playbooks/blob/136d62f9278d31f9f1223771a655490c8360ef92/webapp/webpack.config.js#L127)
```js
        'prop-types': 'PropTypes',
        'react-bootstrap': 'ReactBootstrap',
        'react-router-dom': 'ReactRouterDom',
        'react-intl': 'ReactIntl',
    },

See the original post [here](https://community-daily.mattermost.com/_redirect/pl/4xcqiwsppbnzzn8p38ad5iuhio).

_This issue was generated from [Mattermost](https://mattermost.com) using the [Doc Up](https://github.com/jwilander/mattermost-plugin-docup) plugin._

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the webapp plugin documentation and the registerTranslations reference linked in the issue. Review webapp/webpack.config.js from the mattermost-plugin-playbooks example, especially its react-intl external, and document both required steps with the linked example. Done means a plugin developer can follow the documentation to enable custom translations.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, webpack
Domain
documentation, frontend
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.