@pnlight/sdk-react

A thin React wrapper around the official DivKit Web renderer with PNLight Remote UI behavior installed automatically.

Install

npm install @pnlight/sdk-react

Use

import { RemoteUi } from "@pnlight/sdk-react";
import "@pnlight/sdk-react/styles.css";

export function Screen({ config }: { config: object }) {
  return (
    <RemoteUi
      id="home"
      json={config}
      theme="system"
      onCustomAction={(action) => {
        console.log(action.url);
      }}
      onError={({ error }) => {
        console.error(error);
      }}
    />
  );
}

Like the official @divkitframework/react package, the component accepts the DivKit client render options except target and hydrate. PNLight supplies its own target, custom components, global scaling/safe-area variables, Lottie extension, and protocol handlers.

The package also exports PNLightDivKit as an alias for RemoteUi.

The registered custom components include pnlight.animated_prepend_list. It uses the same props as the iOS component: increasing count by one smoothly prepends the next discovery-ordered item, while larger jumps or resets apply immediately. Rows use intrinsic content height, and instance_id preserves the displayed count if DivKit replaces the underlying custom element.

On the web, DivKit does not make expressions inside custom_props reactive. For a variable-driven list, keep count as a literal initial value and pass the variable name through count_variable:

{
  "custom_props": {
    "count": 0,
    "count_variable": "visible_item_count",
    "items": []
  }
}

The component subscribes to that DivKit variable and applies the same prepend animation for each increment.

PNLight actions

Navigation, dialogs, and haptics are consumed inside the component for schemaVersion: 2 documents. Observe them when needed:

<RemoteUi
  id="offer"
  json={config}
  onPNLightAction={({ kind, url, logId, message }) => {
    console.log(kind, url, logId, message);
  }}
/>

Unconsumed custom URLs continue through DivKit's standard onCustomAction callback.

Styling

Import @pnlight/sdk-react/styles.css once. Give the component or its parent an explicit height when the document uses match_parent:

<RemoteUi id="full-screen" json={config} style={{ minHeight: "100dvh" }} />

Compatibility

• Missing schemaVersion, or version 1, keeps legacy edge-to-edge behavior.
• schemaVersion: 2 enables PNLight flows, safe areas, scaling variables, dialogs, and haptics.
• CTA, icon button, circular loader, animated prepend list, and Lottie support are additive.

This initial package is client-side only. Use it from a client component in SSR frameworks.