Hugo

Embed react components

Hello,

Thank you for a great tool. I’ve been evaluating it for a new site and it seems to be quite
complete.

However, I have a requirement to embed interactive react components. I’ve looked, but I don’t see any examples or guidance out there?

What I have beed able to to:

  • generate a single page app using react, run it through webpack to create a production minified version.
  • copy that version to /static and route via href to that page.

What I’d like to be able to do:

  • create a shortcode component that would:
    • add scripts and components to header and footer
    • generate a div
    • mount the react component to the generated div

Surely/hopefully someone has done this already?

Thanks in advance,

-b

Hi,

Did you perhaps mean partials? (The footer example on that page has some javascript, as an example)

If you need to use shortcodes (ie you only want your react component embedded in specific content pages eg /posts/this-post-has-react/) you can add a .HasShortcode check around the relevant js-related lines your layout and add your react shortcode in the post markdown as normal.