In React applications there are two options when embedding custom javascript code.

One option is to embed the code directly in the html, and the other better solution is by creating a React Component.

1. Embedding code anywhere in the page

This is a familiar option and the easiest way to go. So you can just access the html on any of your React files and paste the EmbedSocial code directly.

Here's an example:

2. Creating a React Component

There are two steps you need to follow to achieve this:

  • Create the component

  • Use the component

Creating the component

1. In your component directory, create a new react component file called `EmbedSocialWidget.js`, and open the file with your code editor.

2. Inside the component’s `render()` function add the embedsocial html

3. Use the value from a prop called `refId` for the `data-ref` attribute inside the embedsocial html you just added.

4. Inside the component’s `componentDidMount()` function, add the embedsocial javascript, which is responsible for building the widget.

Your component file `EmbedSocialWidget.js` should look like the image below:

Using the component

First, login to your EmbedSocial account and go to Widgets. Open one of the widgets that you want to embed and get the EmbedSocial data-ref attribute value (as mentioned above).

The data-ref attribute should look like this:

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

After you have the data-ref value, you can follow the two steps below to use the component:

1. Import the component to any of your react files and use it inside any html element that you want the widget to appear.

2. Add the ref code you just copied as a value to the refId prop.

Here's an example:

That's it.

Hope this was helpful, and if you have questions or need assistance feel free to reach out and chat with us.

We're happy to help :)

Did this answer your question?