How can I embed my form in a React app?

Adding a Paperform embed to your React app is slightly more complicated than copy and paste but only slightly!

Adding the embed script

The first step is to add the embed code script to your application. You only need to do this once. Depending on your app you may just add it directly to your HTML or you can add the script tag dynamically from a component using the useEffect hook on a function component

React.useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://paperform.co/__embed.min.js";
  document.body.appendChild(script);
}, []);

or the componentDidMount method on a class component

componentDidMount() => {
  const script = document.createElement("script");
  script.src = "https://paperform.co/__embed.min.js";
  document.body.appendChild(script);
};

Adding the embed target

The embed scripts will mount forms on elements with the data-paperform-id attribute. Depending on what type of embed you are using there maay be some additional properties required. You can find those properties in the normal embed code.

To render the embed in your React app you just need to add some markup like this:

<div data-paperform-id="YOUR_FORM_SLUG" />

Putting it all together

Here is an example function component that adds the embed script and renders the required markup.

import React from "react";

export default function PaperformEmbed(props) {
  const { formSlug, showSpinner = "1" } = props

  React.useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://paperform.co/__embed.min.js";
    document.body.appendChild(script);
  }, []);

  return (
    <div
      data-paperform-id={formSlug}
      data-spinner={showSpinner}
    />
  );
}