How to embed an HTML/script snippet into a react.js page without jQuery?

Question

I created a react website using create-react-app. In one of the pages, I want to embed an airbnb preview, see below code and screenshot provided by airbnb.

How can I insert this code into my React components? (NB I don't want to use jQuery)

<div
  class="airbnb-embed-frame"
  data-id="21917882"
  data-view="home"
  data-hide-price="true"
  style="width:450px;height:300px;margin:auto"
>
  <a href="https://www.airbnb.com/rooms/21917882?s=51">
    <span>View On Airbnb</span>
  </a>
  <a 
    href="https://www.airbnb.com/rooms/21917882?s=51" 
    rel="nofollow"
    >T2 hypercentre Capitole/St-Sernin, quiet &amp; bright
  </a>
  <script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk" />
</div>;

The component created by this code, which I want to embed in the react page

Fabian Schultz · Accepted Answer · 2018-02-11 00:36:08Z

1

This does go quite against React principles, but you could load the embed script with something like react-async-script-loader (or a custom solution) and then call the provided AirbnbAPI.bootstrap() function on render or when the component mounts.

💻 Live Example

import React, { Component } from "react";
import scriptLoader from "react-async-script-loader";

const Preview = ({ isScriptLoaded, isScriptLoadSucceed }) => {
  if (isScriptLoaded && isScriptLoadSucceed) {
    window.AirbnbAPI.bootstrap();
  }

  return (
    <div
      className="airbnb-embed-frame"
      data-id="21917882"
      data-view="home"
      data-hide-price="true"
      style={{ width: 450, height: 300, margin: "auto" }}
    >
      <a href="https://www.airbnb.com/rooms/21917882?s=51">
        <span>View On Airbnb</span>
      </a>
      <a href="https://www.airbnb.com/rooms/21917882?s=51" rel="nofollow">
        T2 hypercentre Capitole/St-Sernin, quiet &amp; bright
      </a>
    </div>
  );
};

export default scriptLoader(["https://www.airbnb.com/embeddable/airbnb_jssdk"])(
  Preview
);

answered Feb 11, 2018 at 0:36

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

xiaoju Over a year ago

thanks! But this doesn't build the complete component: we only get the pictures, not the text and labels below. (see screenshot of the expected result, in my original message). Any idea how to get the whole thing?

Fabian Schultz Over a year ago

@xiaoju Change the height of the div?

xiaoju Over a year ago

indeed changing height to 500 solved my issue, thank you! BTW, what is it in react-async-script-loader that goes against React principles? What would be the React way? Code splitting?

Fabian Schultz Over a year ago

@xiaoju It’s more that the airbnb script is directly manipulating the DOM. React basically doesn’t know what’s going on in that component.

Collectives™ on Stack Overflow

How to embed an HTML/script snippet into a react.js page without jQuery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related