Add documentation for custom emoji data support

site/package-lock.json

@@ -1403,6 +1403,11 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "@roderickhsiao/emoji-button-locale-data": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@roderickhsiao/emoji-button-locale-data/-/emoji-button-locale-data-0.1.0.tgz",
+      "integrity": "sha512-sL1UVi602ucycfxBMDgn6dJ/3qS++Wo8ex0l0n4pMR8LaSk6ZaQGdq/gT6RsFH6UrRmzes3GRAD6UCPu2keGLg=="
+    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",

site/package.json

@@ -18,6 +18,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "@roderickhsiao/emoji-button-locale-data": "^0.1.0",
     "escape-html": "^1.0.3",
     "gatsby": "^2.23.12",
     "gatsby-plugin-gtag": "^1.0.13",

site/src/components/Sidebar.js

@@ -31,6 +31,11 @@ export default function Sidebar() {
             Custom Emojis
           </Link>
         </li>
+        <li>
+          <Link activeClassName={styles.active} to="/docs/customData">
+            Custom Emoji Data
+          </Link>
+        </li>
         <li>
           <Link activeClassName={styles.active} to="/docs/icons">
             Custom Icons

site/src/examples/customData.js

@@ -0,0 +1,5 @@
+import frEmojiData from '@roderickhsiao/emoji-button-locale-data/dist/fr';
+
+const picker = new EmojiButton({
+  emojiData: frEmojiData
+});

site/src/pages/docs/api.js

@@ -130,6 +130,22 @@ export default function ApiDocs() {
               </td>
             </tr>
 
+            <tr>
+              <th scope="row">
+                <code>emojiData</code>
+              </th>
+              <td>object</td>
+              <td>Built-in emoji data</td>
+              <td>
+                The custom emoji data to use. This is typically used for
+                providing translated emoji names, such as from the{' '}
+                <a href="https://www.npmjs.com/package/@roderickhsiao/emoji-button-locale-data">
+                  @roderickhsiao/emoji-button-locale-data
+                </a>{' '}
+                package.
+              </td>
+            </tr>
+
             <tr>
               <th scope="row">
                 <code>emojiSize</code>

site/src/pages/docs/customData.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import frEmojiData from '@roderickhsiao/emoji-button-locale-data/dist/fr';
+
+import DocLayout from '../../components/DocLayout';
+import Example from '../../components/Example';
+import SourceFile from '../../components/SourceFile';
+
+import customDataExample from '!!raw-loader!../../examples/customData';
+
+export default function CustomData() {
+  return (
+    <DocLayout>
+      <h1>Custom Emoji Data</h1>
+      <p>
+        Emoji Button ships with English emoji data. If your site or app is in a
+        different language, you probably want to use emoji data with translated
+        emoji names. This can most easily be done by installing the package{' '}
+        <a href="https://www.npmjs.com/package/@roderickhsiao/emoji-button-locale-data">
+          @roderickhsiao/emoji-button-locale-data
+        </a>
+        , which contains emoji translations for many languages.
+      </p>
+
+      <div>
+        <Example options={{ emojiData: frEmojiData }} />
+      </div>
+
+      <SourceFile src={customDataExample} />
+    </DocLayout>
+  );
+}