react-messenger-plugin

Component wrapper for Facebook Messenger plugins

Installation

``shell
npm install --save react-messenger-plugin
`

Usage

To use the Messenger Plugin, you will need an App Id and a Page Id. You can find create an app here and you will find your page Id at the bottom of your Facebook page settings.

You can then use the plugin.

`jsx
var React = require("react");
var render = require("react-dom").render;
var MessengerPlugin = require("react-messenger-plugin");

render(
appId=""
pageId=""
/>,
document.body
);
`

$3

| Name | Type | Required? | Default | Description |
| --- | --- | --- | --- | --- |
| appId | string | yes | - | Your Facebook app id |
| pageId | string | yes | - | Your Facebook page id |
| version | string | no | v2.6 | The Facebook API version you are using, See documentation. |
| passthroughParams | string | no | - | Equivalent of data-ref. Used to pass state with the authentication. See documentation. |
| type | string | no | send-to | Type of plugin. Must be either send-to (Send-to-Messenger plugin) or message-us (Message-Us plugin). |
| color | string | no | blue | Color of the button. Must be either blue or white. |
| size | string | no | standard | Size of the button. Must be either standard, large, or xlarge. |
| asyncScriptOnLoad | function | no | - | Callback triggered when the SDK script is loaded. |

Advanced usage

If you already have the Facebook SDK loaded in your page, you can use the unwrapped component and pass the SDK to it.

`jsx
var React = require("react");
var render = require("react-dom").render;
var MessengerPlugin = require("react-messenger-plugin/lib/MessengerPlugin");

render(
appId=""
pageId="",
FB={window.FB}
/>,
document.body
);
``
---

Inspired by react-google-recaptcha