Asset Provider Plugin

The Asset Provider Plugin enables users to easily register UI components to render their assets. It’s used internally by the Reference Assets. The matches follow the same rules as asset transforms (more specific matches take priority).

Usage

Platform

React

Install the plugin:

npm

npm i @player-ui/asset-provider-plugin-react

yarn

yarn add @player-ui/asset-provider-plugin-react

pnpm

pnpm add @player-ui/asset-provider-plugin-react

Create an instance, and add it to your Player instance. The API is similar to the JavaScript Map, and takes a list of [match, Component] tuples.

import { ReactPlayer } from "@player-ui/react";
import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";

const player = new ReactPlayer({
  plugins: [
    new AssetProviderPlugin([
      ["custom-asset", () => <div>Hello World!</div>],
      [{ type: "custom", key: "asset" }, () => <div>Other Custom Asset</div>],
    ]),
  ],
});

This will register a match on { type: 'custom-asset' } and { type: 'custom', key: 'asset' } in the view to use your React components.

Content

In this example, when your content has assets of type custom-asset and custom, they will render <div>Hello World!</div> and <div>Other Custom Asset</div>.

TSX

import { Custom, CustomAsset, Collection } from "my-assets";

const view = (
  <Collection>
    <CustomAsset />
    <Custom />
  </Collection>
);

JSON

{
  "id": "test-flow",
  "views": [
    {
      "id": "view-1",
      "type": "collection",
      "label": {
        "asset": {
          "id": "title",
          "type": "text",
          "value": "Collections are used to group assets."
        }
      },
      "values": [
        {
          "asset": {
            "id": "custom-1",
            "type": "custom-asset"
          }
        },
        {
          "asset": {
            "id": "custom-2",
            "type": "custom"
          }
        }
      ]
    }
  ],
  "navigation": {
    "BEGIN": "FLOW_1",
    "FLOW_1": {
      "startState": "VIEW_1",
      "VIEW_1": {
        "state_type": "VIEW",
        "ref": "view-1",
        "transitions": {
          "*": "END_Done"
        }
      },
      "END_Done": {
        "state_type": "END",
        "outcome": "DONE"
      }
    }
  }
}

This will register a match on { type: 'custom-asset' } and { type: 'custom', key: 'asset' } in the view to use your React components.