From e5a4fbc1cde1ac9bfee7ada76d31ed1e6f2015d3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 12 May 2017 12:07:55 -0300
Subject: [PATCH 1/2] DOCS Hooks

---
 docs/frontend/HOOKS.md   |  0
 docs/frontend/PLUGINS.md | 28 ++++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 docs/frontend/HOOKS.md

diff --git a/docs/frontend/HOOKS.md b/docs/frontend/HOOKS.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/frontend/PLUGINS.md b/docs/frontend/PLUGINS.md
index 8377d0359..4d993c0be 100644
--- a/docs/frontend/PLUGINS.md
+++ b/docs/frontend/PLUGINS.md
@@ -170,6 +170,34 @@ Our `style.css` should could look like this.
 }
 ```
 
+## Plugin Hooks
+The plugins injected in the CommentBox such as `commentInputDetailArea` will inherit through props tools for handling hooks.
+
+### Available hook types:
+`preSubmit` : To perform actions before submitting the comment.
+`postSubmit` : To perform actions after submitting the comment.
+
+### Register Hooks
+`registerHook` is a function that takes: the hook type, a hook function and returns the hook data.
+
+#### Usage:
+```js
+      this.addCommentTagHook = this.props.registerHook('postSubmit', (data) => {
+        const {comment} = data.createComment;
+        this.props.addCommentTag({
+          id: comment.id,
+          tag: 'OFF_TOPIC'
+        });
+      });
+```
+
+### Unregister Hooks
+
+`unregisterHook` will remove the hook.
+
+```js
+	this.props.unregisterHook(this.addCommentTagHook);
+```
 
 ### The server folder and the index file
 Read more about the `/server` and how to extend Talk here.

From 674ac500352a1ea20d50dc9256157c43a2e0003b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 12 May 2017 12:29:02 -0300
Subject: [PATCH 2/2] =?UTF-8?q?=C3=81dding=20reaction=20docs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/frontend/PLUGINS.md | 72 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 3 deletions(-)

diff --git a/docs/frontend/PLUGINS.md b/docs/frontend/PLUGINS.md
index 4d993c0be..0edc4d455 100644
--- a/docs/frontend/PLUGINS.md
+++ b/docs/frontend/PLUGINS.md
@@ -3,9 +3,10 @@ We can build plugins to extend the functionality of Talk.
 
 This guide is a walkthrough of our plugin architecture and components that we provide that allow you to build on top of Core coral components without having to understand the concepts there in. It is organized into three sections:
 
-* Plugin architecture
+* [Plugin Architecture](#plugin-architecture)
 * Using our building block components
-* Styling
+* [Reactions](#reactions)
+* [Styling](#styling-plugins)
 
 Advanced users will quickly realize that our plugins have complete access to core code. If you would like to write advanced plugins that reach outside of our published API as described in this document, please see [our notes on experimental pluginss](PLUGINS-experimental.md).
 
@@ -97,12 +98,77 @@ Slots properties take an`Array` so we can add as many components as we want.
 
 In order to allow you to build more complex plugins, we have wrapped some of our functionality in higher order components that expose a simple api.
 
-### Reactions
+## Reactions
 
 Reactions provide users the ability to 'like', 'respect', etc... comments.
 
 Note: some server side work will need to accompany this client side component. See the like and respect plugins as examples.
 
+### Building Reactions
+
+#### Our `client/index.js` :
+
+```js
+import LoveButton from './LoveButton';
+
+export default {
+  slots: {
+    commentReactions: [LoveButton]
+  }
+};
+
+```
+In this example we add our reaction component to the `commentReaction` Slot
+ 
+#### Our Reaction component:
+   
+```js
+import React from 'react';
+import {withReaction} from 'coral-plugin-api';
+
+class LoveButton extends React.Component {
+  handleClick = () => {
+    const {
+      postReaction,
+      deleteReaction,
+      alreadyReacted
+    } = this.props;
+
+    if (alreadyReacted()) {
+      deleteReaction();
+    } else {
+      postReaction();
+    }
+  };
+
+  render() {
+    const {count} = this.props;
+    return (
+      <button onClick={this.handleClick}>
+        <span>Love</span>
+        <span>{count > 0 && count}</span>
+      </button>
+    );
+  }
+}
+
+export default withReaction('love')(LoveButton);
+```
+
+
+This feature introduces `withReaction` HOC.  `withReaction` takes, as argument, a reaction string and it allows our component to receive specific props for handling reactions. 
+
+	* `postReaction` - Posts the reaction
+	
+	* `deleteReaction` - Removes the reaction
+	
+	* `alreadyReacted` - A function that returns a boolean.
+	    
+	* `count` - The reaction count
+
+
+For full reference: Please, check `coral-plugin-love`: [LoveButton.js](https://github.com/coralproject/talk/blob/master/plugins/coral-plugin-love/client/LoveButton.js)
+
 ### Comment Stream
 
 Comment streams may be created with filtering and ordering in place: