Skip to main content

🚧 React Host Application

Hosting Myop Components in a React Application​

In this tutorial, we'll walk through the steps of integrating Myop components into a React application. Myop enables dynamic and real-time UI management without the need for full redeployment, making it a great choice for modern web applications.

Disclaimer​

Please note that the SSR support tutorial will be provided in a separate document. This file does not cover SSR-specific topics, and a dedicated tutorial will be available soon.

Prerequisites​

Before you begin, ensure you have the following:

  • Node.js: Download and install Node.js.
  • npm: Node.js includes npm, the Node package manager.
  • React: If you don't have a React app set up yet, you can create one using vite, create-vite or any other react starter kit.

1. Get into Your React Project dir​

once you already have an existing React app, just navigate to your project directory.

cd myop-react-app

2. Install the Myop SDK​

Install the Myop SDK package:

npm install @myop/sdk

This command adds the Myop SDK to your project, providing the tools needed to integrate Myop components.

3. Use Myop's Dynamic React Component​

import React, { useEffect, useRef } from 'react';
import MyopComponent from '@myop/sdk/react';

const MyComponent = () => {
  return (
    <div>
      <h1>Myop Component in React</h1>
      <MyopComponent
        flowId={'49283058-a787-4fa5-b0d2-516b2e6dc5e3'}
        componentId={'8c72d29b-c8a0-41cf-b08f-4acca96c7a16'}
        onLoad={(myopComponent) => {}}
      />
    </div>
  );
};

export default MyComponent;

4.Manually Create a React Component for Myop Integration [optional]​

For more control of the loading & usage processes of Myop Component, you can create a new React component where you'll load and render Myop components. For example, create a new file MyopComponent.js in your src directory.

// src/MyopComponent.js
import React, { useEffect, useRef } from 'react';
import { getHostModule } from '@myop/sdk';

const MyopComponent = () => {
  const containerRef = useRef(null);
  const myopComponent = useRef(null);

  useEffect(() => {
    const loadMyopComponent = async () => {
      const { hostSDK } = await getHostModule();

      // Example: fetch component configuration from Myop cloud
      const flowId = '49283058-a787-4fa5-b0d2-516b2e6dc5e3';
      const componentId = '8c72d29b-c8a0-41cf-b08f-4acca96c7a16';
      const res = await fetch(
        `https://cloud.myop.dev/flow?id=${flowId}&resolve=components`
      );
      const json = await res.json();
      const userFlow = json.item;
      const componentConfig = userFlow.components.find(
        (c) => c.type.id === componentId
      );

      // Load the component into the React component's container
      myopComponent = await hostSDK.loadComponent(
        componentConfig,
        containerRef.current
      );
    };

    if (containerRef.current && !myopComponent.current) {
      loadMyopComponent();
    }
  }, []);

  return (
    <div>
      <h1>Myop Component in React</h1>
      <div ref={containerRef}></div>
    </div>
  );
};

export default MyopComponent;

Explanation:​

  • We use the useRef hook to get a reference to the container DOM element where the Myop component will be rendered.

  • Inside the useEffect hook, we load the Myop component once the component is mounted.

  • The component's configuration (componentConfig) is fetched from the Myop cloud.

  • The hostSDK.loadComponent() method is called to dynamically load the Myop component into the container.

  • Again, note that the SSR support tutorial will be provided in a separate document

5. Use the MyopComponent in Your App​

Now, you can use the MyopComponent inside your App.js or wherever you'd like to display the Myop component.

// src/App.js
import React from 'react';
import './App.css';
import MyopComponent from './MyopComponent';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Myop React Integration</h1>
        <MyopComponent />
      </header>
    </div>
  );
}

export default App;

Explanation:​

  • We've imported MyopComponent into App.js and included it within the JSX structure of the application.
  • When the app is loaded, it will render the Myop component in the specified container.

6. Run Your React Application​

To start the development server and see your application in action, run the following command:

npm run start

This will start the React development server, and you should be able to see your React app at http://localhost:3000.

6. Additional Customization and Interaction with Myop Components​

Once the Myop component is integrated into your React app, you can start interacting with it just like any other React component. You can pass props, access component state, and respond to lifecycle events.

For more advanced use cases, you may want to:

  • Pass dynamic props to the Myop component based on user input or app state.
  • Update the component based on external events or changes in your React app's state.
  • Controlling and changing component refs based on events or changes in your React app's state.
  • Getting data or user events from the component based on events or user action inside the Myop component.
  • Handle component lifecycle events, such as when the Myop component is mounted, updated, or destroyed. Check the Myop Documentation for more advanced features, such as handling events or using refs to interact with the component.

Additional Resources​

By following these steps, you've integrated Myop components into your React application, allowing dynamic, real-time updates without the need for full redeployment. For more detailed information and advanced configurations, refer to the Myop Documentation and React Documentation.