Add documentation for i18n support

docs/docs/02 - usage/08 - i18n.md

@@ -1,6 +1,39 @@
 # UI text and translations
 
-Currently, PicMo's UI strings are only available in English. Contributions of other translations are welcomed!
+PicMo's UI strings are available in several languages:
+
+- English (`en`) (default)
+- German (`de`)
+- Finnish (`fi`)
+- French (`fr`)
+- Dutch (`nl`)
+- Norwegian (`no`)
+- Swedish (`sv`)
+
+Contributions of other translations are welcomed!
+
+To specify a language other than English, specify the `i18n` property in the picker options:
+
+```javascript
+import { createPicker, i18n } from 'picmo';
+
+const picker = createPicker({
+  rootElement: pickerEl,
+  i18n: i18n.de
+});
+```
+
+It's recommended to set the emoji data locale to the same language, if it's available. You can do this with the `locale` option:
+
+```javascript
+import { createPicker, i18n } from 'picmo';
+
+const picker = createPicker({
+  rootElement: pickerEl,
+  i18n: i18n.de,
+  locale: 'de'
+});
+```
 
 ## Category and emoji names
 

docs/docs/api/picmo/types/picker-options.md

@@ -103,7 +103,7 @@ A specific number can be specified, or `auto` can be used to automatically deter
 - **Type**: [`Dictionary`](./dictionary)
 - **Default**: Built-in English strings
 
-A collection of i18n strings to use for the picker.
+A collection of i18n strings to use for the picker. Available languages are exported from PicMo as an `i18n` object whose properties are the language codes.
 
 ### `initialCategory`
 

packages/picmo/index.js

@@ -1,4 +1,4 @@
-import { createPicker, darkTheme, lightTheme } from './src/index';
+import { createPicker, darkTheme, lightTheme, i18n } from './src/index';
 
 const rootElement = document.querySelector('#picker');
 const selectionEl = document.querySelector('pre');
@@ -27,6 +27,8 @@ const picker = createPicker({
   rootElement,
   custom: customEmojis,
   className: 'my-picker',
+  i18n: i18n.de,
+  locale: 'sv'
   // recentsProvider: new InMemoryProvider(),
   // dataStore: InMemoryStoreFactory
   // emojisPerRow: 5

packages/picmo/src/i18n/index.ts

@@ -1 +1,7 @@
+export { default as de } from './lang-de';
 export { default as en } from './lang-en';
+export { default as fi } from './lang-fi';
+export { default as fr } from './lang-fr';
+export { default as nl } from './lang-nl';
+export { default as no } from './lang-no';
+export { default as sv } from './lang-sv';

packages/picmo/src/index.ts

@@ -15,6 +15,9 @@ export type { ExternalEvent, ExternalEventKey } from './ExternalEvents';
 export { Renderer } from './renderers/renderer';
 export { NativeRenderer } from './renderers/native';
 
+import * as i18n from './i18n';
+export { i18n };
+
 export { default as en } from './i18n/lang-en';
 export { deleteDatabase } from './data/emojiData';
 import { DataStoreFactory } from './data/DataStore';