Adding full example with translations

plugins/coral-plugin-love/client/LoveButton.js

@@ -1,12 +1,20 @@
 import React from 'react';
-import withReaction from 'coral-framework/hocs/withReaction';
-import styles from './styles.css';
 import {Icon} from 'coral-ui';
+import styles from './styles.css';
+import {I18n} from 'coral-framework';
+import translations from './translations.json';
+import withReaction from 'coral-framework/hocs/withReaction';
+const lang = new I18n(translations);
 
 class LoveButton extends React.Component {
   handleClick = () => {
-    const { postReaction, deleteReaction, showSignInDialog, reactionSummary} = this.props;
-    const { root: { me }, comment } = this.props;
+    const {
+      postReaction,
+      deleteReaction,
+      showSignInDialog,
+      reactionSummary
+    } = this.props;
+    const {root: {me}, comment} = this.props;
 
     // If the current user does not exist, trigger sign in dialog.
     if (!me) {
@@ -29,13 +37,16 @@ class LoveButton extends React.Component {
   render() {
     const {count, reactionSummary} = this.props;
     return (
-      <button className={`${styles.button} ${reactionSummary? styles.loved : ''}`} onClick={this.handleClick}>
-        <span>Love</span>
-        <Icon name="favorite"/>
+      <button
+        className={`${styles.button} ${reactionSummary ? styles.loved : ''}`}
+        onClick={this.handleClick}
+      >
+        <span>{lang.t(reactionSummary ? 'loved' : 'love')}</span>
+        <Icon name="favorite" />
         <span>{count > 0 && count}</span>
       </button>
     );
   }
 }
 
-export default withReaction('love')(LoveButton);
+export default withReaction('love')(LoveButton);

plugins/coral-plugin-love/client/translations.json

@@ -1,10 +1,10 @@
 {
   "en": {
-    "like": "Like",
-    "liked": "Liked"
+    "love": "Love",
+    "loved": "Loved"
   },
   "es": {
-    "like": "Me Gusta",
-    "liked": "Me Gustó"
+    "love": "Amo",
+    "loved": "Amé"
   }
 }