@myop/react

Official React bindings for embedding Myop components in your React applications.

Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.

Website | Documentation | Dashboard | Discord

Installation

npm install @myop/react

yarn add @myop/react

pnpm add @myop/react

Auto-Generated React Components

Myop automatically generates a typed React component package for every component you create in the dashboard. Install it directly via npm:

npm install https://cloud.myop.dev/npm/{component-id}/react

Then import and use it like any React component. For example, if you created a table component called "users-table" in the dashboard:

import { UsersTable } from "@myop/users-table";

function App() {
  const users = [
    { id: 1, name: "Alice", email: "[email protected]", role: "Admin" },
    { id: 2, name: "Bob", email: "[email protected]", role: "User" },
    { id: 3, name: "Charlie", email: "[email protected]", role: "User" },
  ];

  return (
    <UsersTable
      data={{ rows: users }}
      onRowClicked={(payload) => {
        console.log("Selected user:", payload.rowData);
      }}
      onDeleteClicked={(payload) => {
        deleteUser(payload.userId);
      }}
      onExportRequested={(payload) => {
        exportToFormat(payload.format); // "csv" | "xlsx"
      }}
    />
  );
}

Why this is powerful:

• Fully typed — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
• Auto loaded — Components are fetched and rendered automatically, no manual setup required
• Not in your code — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
• Zero bundle impact — The entire @myop/react package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed

Environment options:

Set the default environment for all components using setEnvironment:

import { setEnvironment } from "@myop/react";

// Set default environment for all component loads
setEnvironment("staging");

You can also override the environment directly on a specific component:

<UsersTable
  data={...}
  preview={true}        // Load unpublished preview version
  environment="staging" // Load from specific environment (prod, staging, etc.)
/>

Environments are fully configurable in the dashboard, allowing you to test changes in staging before publishing to production.

Requirements

• React 18.0+

Quick Start

import { MyopComponent } from "@myop/react";

function App() {
  return (
    <MyopComponent
      componentId="your-component-id"
      style={{ width: 600, height: 400 }}
      on={(action, payload) => {
        console.log("Action:", action, "Payload:", payload);
      }}
    />
  );
}

Components

MyopComponent

The main component for embedding Myop components.

import { MyopComponent } from "@myop/react";

<MyopComponent
  componentId="abc123"
  data={{ items: [...] }}
  onRowClicked={(payload) => console.log(payload)}
  onLoad={(component) => console.log("Loaded!", component)}
  onError={(error) => console.error(error)}
/>

Props

| Prop | Type | Description | |------|------|-------------| | componentId | string | The ID of the Myop component to load | | data | TData | Data to pass to the component via myop_init_interface | | on | (action, payload) => void | Generic handler for all CTA events | | on[ActionName] | (payload) => void | Typed handler for specific actions (e.g., onRowClicked) | | onLoad | (component) => void | Called when the component finishes loading | | onError | (error: string) => void | Called when loading fails | | style | CSSProperties | CSS styles for the container | | loader | ReactNode | Custom loading indicator | | fallback | ReactNode | Custom error fallback UI | | fadeDuration | number | Loader fade-out duration in ms (default: 200) | | environment | string | Load from a specific environment (e.g., "staging", "prod") | | preview | boolean | Load the unpublished preview version of the component |

Environments & Preview

Myop supports multiple environments, allowing you to test changes before going live:

// Production (default)
<MyopComponent componentId="abc123" />

// Load from staging environment
<MyopComponent componentId="abc123" environment="staging" />

// Load unpublished preview version (for testing before publishing)
<MyopComponent componentId="abc123" preview={true} />

// Combine both: preview version in staging
<MyopComponent componentId="abc123" environment="staging" preview={true} />

Environments are configured in the dashboard. Use preview={true} to test unpublished changes before making them live.

MyopContainer (Legacy)

The legacy container component. Use MyopComponent for new projects.

import { MyopContainer } from "@myop/react";

<MyopContainer
  componentId="abc123"
  onReady={(component) => console.log("Ready!", component)}
/>

Type-Safe Event Handlers

Define your CTA payloads for fully typed event handlers:

import { MyopComponent, IPropTypes } from "@myop/react";

// Define your component's data and CTA payload types
interface MyData {
  items: { id: string; name: string }[];
}

interface MyCtaPayloads {
  "row-clicked": { rowIndex: number; rowData: any };
  "item-selected": { itemId: string };
  "export-requested": { format: "csv" | "json" };
}

function Dashboard() {
  return (
    <MyopComponent<MyData, MyCtaPayloads>
      componentId="dashboard-component"
      data={{ items: [...] }}
      // Typed handler - kebab-case converts to onPascalCase
      onRowClicked={(payload) => {
        // payload is typed as { rowIndex: number; rowData: any }
        console.log("Row clicked:", payload.rowIndex);
      }}
      onItemSelected={(payload) => {
        // payload is typed as { itemId: string }
        console.log("Item selected:", payload.itemId);
      }}
      // Or use the generic handler
      on={(action, payload) => {
        // action is keyof MyCtaPayloads
        console.log(action, payload);
      }}
    />
  );
}

Configuration

Preloading Components

Preload components for faster rendering:

import { preloadComponents, isPreloaded } from "@myop/react";

// Preload multiple components
await preloadComponents(["component-1", "component-2"]);

// Check if a component is preloaded
if (isPreloaded("component-1")) {
  console.log("Component is cached and ready");
}

Custom Repository URL

import { setCloudRepositoryUrl } from "@myop/react";

// Point to a custom Myop server
setCloudRepositoryUrl("https://your-custom-server.com");

Environment Configuration

import { setEnvironment } from "@myop/react";

// Set default environment for all component loads
setEnvironment("staging");

Local Development

import { enableLocalDev } from "@myop/react";

// Connect to local Myop development server (localhost:9292)
enableLocalDev();

Advanced: Custom Repository

import { setCloudRepository, getCloudRepository } from "@myop/react";
import { CloudRepository } from "@myop/sdk/helpers";

// Set a custom CloudRepository instance
const customRepo = new CloudRepository("https://custom-url.com");
setCloudRepository(customRepo);

// Get the current repository
const repo = getCloudRepository();

Custom Loading & Error States

<MyopComponent
  componentId="my-component"
  loader={
    <div className="custom-loader">
      <Spinner />
      <p>Loading component...</p>
    </div>
  }
  fallback={
    <div className="error-state">
      <p>Failed to load component</p>
      <button onClick={() => window.location.reload()}>Retry</button>
    </div>
  }
  fadeDuration={300}
/>

API Reference

Exports

| Export | Description | |--------|-------------| | MyopComponent | Main component for embedding Myop components | | preloadComponents | Preload components for faster rendering | | isPreloaded | Check if a component is cached | | enableLocalDev | Enable local development mode | | setCloudRepositoryUrl | Set custom server URL | | setCloudRepository | Set custom CloudRepository instance | | getCloudRepository | Get current CloudRepository instance | | setEnvironment | Set default environment | | IComponentInstanceConfig | TypeScript interface for component config | | IPropTypes | TypeScript interface for component props |

License

MIT