React Widgets + AEM

index.js

import Widget from './widget.jsx';
import habitat from 'react-new-tyson-module';


const widgetInAem = habitat(Widget);
widgetInAem.render({
  selector: '.booking-widget', // you can also use id #widgetId or data attribute [data-attribute-widget="mny-widget"]
  inline: false, //optional
  clean: false, //optional cleans the loading div or anything in the DOM after we mounr
  clientSpecified: false //optional
})

page.aem.html

<div class="page conatiner">
  <div class="booking-widget">
    <!-- those are all passed down as props -->
    <script type="text/props">
      {
        "title": "Booking Widget",
        "theme": "red",
        "main-color": "#f00"
      }
    </script>
    <script async src="s3.qantas.com/booking.js"></script>
  </div>
</div>