UI SDK

The UI SDK offers a bevy of React components based on the Material UI, or MUI, library.

For any custom view, we recommend using the UI SDK to make it appear to be a seamless part of the Formant web application.

Installation

The Formant UI SDK is published as a Node package. The easiest way to install it is with the Yarn package manager:

yarn add @formant/ui-sdk

See this example for a typical installation.

Additionally, Formant publishes the following specialized packages:

• @formant/ui-sdk-joystick for getting a simple joystick with keyboard controls
• @formant/ui-sdk-login for using a native-looking login window
• @formant/ui-sdk-realtime-player for displaying low-latency video

Example Library

Below is the library of UI SDK components to use in your custom views or modules. See the UI-SDK code powering this page here.

For example, to create a select box, your code might look like this (adapted from the link above):

import { createRoot } from "react-dom/client";
import { Typography, Select } from "@formant/ui-sdk";

function App() {
  return (
		<Typography variant="h2" sx={{ textDecoration: "underline" }}>
  		Select
    </Typography>
    <Select
      label="Age"
      items={[
           { label: "0-10", value: "0-10" },
           { label: "11-20", value: "11-20" },
           { label: "21-30", value: "21-30" },
           ]}
      />
    );
}
    
const container = document.getElementById("app");
if (container) {
  const root = createRoot(container);
  root.render(
    <FormantProvider>
      <App />
    </FormantProvider>
  );
}

Read on for more details about creating custom views.