React SDK

The SDK is also available as native React components. If your admin panel is built with React, use this instead of the script-tag setup — same pages, same credentials, but rendered as a component in your tree instead of into a target <div>.

Everything else in this section applies equally to the React SDK: authentication works as described in Getting Started, venues are provisioned as in Venue Setup, the embeddable pages are listed in Available Pages, and styles can be overridden as in Customisation.

Packages

The React SDK is distributed as private npm packages on GitHub Packages — one per environment:

Environment	Package	Backend
Sandbox	@mozrest/sdk-react-sandbox	api-sandbox.mozrest.com
Production	@mozrest/sdk-react-prod	api.mozrest.com

Install the package matching the environment you are integrating against; use the sandbox package during development and certification.

Access

The packages are private. During onboarding, Mozrest provides you with a read-only registry token, shared through a secure channel.

Add this to the .npmrc of your project:

@mozrest:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${MOZREST_SDK_TOKEN}

Set MOZREST_SDK_TOKEN in your environment (locally and in CI) to the token Mozrest provided. Never commit the token itself. If the token is ever exposed, contact Mozrest and we will rotate it.

Install

npm install @mozrest/sdk-react-sandbox
# or
yarn add @mozrest/sdk-react-sandbox

Usage

Import the ComponentFactory component and the stylesheet, then render the page you want to embed:

import { ComponentFactory } from "@mozrest/sdk-react-sandbox";
import "@mozrest/sdk-react-sandbox/style.css";

export default function VenueListing({ venue, user }) {
  return (
    <ComponentFactory
      page="Listing"
      accessKey={venue.accessKey}
      userEmail={user.email}
      userFullName={user.fullName}
      lang="en"
    />
  );
}

Props

Prop	Type	Required	Description
page	String	Yes	Page key to render — any key from Available Pages (e.g. Listing, ReviewsPage, ListingAnalytics, ReviewAnalytics).
accessKey	String	Yes	The venue access key generated by Mozrest (see Getting Started).
venueId	String	No	Preselects a specific venue when the access key covers more than one.
userEmail	String	No	Email of the user operating the embedded page.
userFullName	String	No	Display name of the user operating the embedded page.
lang	String	No	Interface language: en, es, fr, de or nl. Defaults to en.

Render a different page key to embed another feature — for example one route of your admin panel can show Listing and another ReviewsPage, each with its own ComponentFactory.

Complete example

A self-contained panel that embeds the Listing and Reviews features behind tabs, for the venue currently selected in your admin panel:

import { useState } from "react";
import { ComponentFactory } from "@mozrest/sdk-react-sandbox";
import "@mozrest/sdk-react-sandbox/style.css";

const TABS = [
  { key: "Listing", label: "Listing" },
  { key: "ListingAnalytics", label: "Listing analytics" },
  { key: "ReviewsPage", label: "Reviews" },
  { key: "ReviewAnalytics", label: "Review analytics" },
];

export default function MozrestPanel({ venue, currentUser }) {
  const [page, setPage] = useState("Listing");

  return (
    <div>
      <nav>
        {TABS.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setPage(tab.key)}
            disabled={tab.key === page}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      <ComponentFactory
        key={page}
        page={page}
        accessKey={venue.mozrestAccessKey}
        userEmail={currentUser.email}
        userFullName={currentUser.fullName}
        lang={currentUser.locale}
      />
    </div>
  );
}

The component handles its own data loading, error states and internal navigation — you only provide the credentials and the page key.

One build for several environments

If a single build of your app targets both sandbox and production, install both packages and select at runtime with a dynamic import (this is how Mozrest's own apps do it):

const loadComponentFactory = async () => {
  if (process.env.REACT_APP_MOZREST_ENV === "prod") {
    return (await import("@mozrest/sdk-react-prod")).ComponentFactory;
  }
  return (await import("@mozrest/sdk-react-sandbox")).ComponentFactory;
};

If each environment gets its own build, skip this and just install the matching package.

Styling

The bundled stylesheet (style.css) must be imported once. All Customisation options — fonts, colours, buttons, cards — apply to the React SDK exactly as they do to the script-tag SDK.

Licence

The licence covering use of the SDK is included in each package (LICENSE.md); use within your own products is governed by your partner agreement with Mozrest.