How do I install the Mopinion deployment code in React?

At the moment there is no official React implementation for a Mopinion deployment. The default Mopinion implementation is compatible with React, with some caveats. The advice below will help you set it up.

The Mopinion ReactNative SDK can not be used for a React implementation. Instead, use the Mopinion web deployment. See Where can I find my deployment?

We recommend placing the deployment code inside your index.html and having the Mopinion deployment handle the placement of the div your modal and slide-in forms will render in. Alternatively, if you want to trigger the deployment from your React code, make sure it only runs once by placing it inside a useEffect hook with an empty dependency array or the componentDidMount lifecycle function inside a component that won’t unmount and re-mount.

Embedded form

If you will be using embedded forms you have to make sure that the div in which the Mopinion forms show is not rerendered by React. Additional rules are required to clean up a form, so the code does not assume the form is still active, while the div has already been removed by React. It is also advisable not to use our default name surveyContent for the div id or class. In the below example, we use the name surveyContentEmbedded.

Below is an example of the way you could set up a component used to show an embedded form.

import React, { Component, memo } from 'react';

//class component example
class Example extends Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    return (
      <div id="surveyContentEmbedded" />
    )
  }
}

//functional component example
const Example = memo(
  function Example() {
    return (
      <div id="surveyContentEmbedded" /> 
    )
  },
  () => true
)