`@parity/product-sdk-react-renderer`


npm install @parity/product-sdk-react-renderer


pnpm add @parity/product-sdk-react-renderer


yarn add @parity/product-sdk-react-renderer


bun add @parity/product-sdk-react-renderer

Exports

Functions

Name	Summary
`Box()`	—
`Button()`	—
`Column()`	—
`createRenderer()`	—
`drawPocketCard()`	Draw `cardId` for as long as the host keeps the card on screen.
`Effect()`	—
`Image()`	—
`matchChatCustomRenderers()`	Select a registered renderer using the custom message’s product-defined type.
`registerChatMessageRenderer()`	Register a React-based renderer for custom chat messages.
`Row()`	—
`Spacer()`	—
`Text()`	—
`TextField()`	—

Interfaces

Name	Summary
`CardDrawRegistration`	Handle for one card’s registration.
`CardRender`	Which card the host is asking for, and what it carried.
`DrawPocketCardOptions`	—
`FaceCheck`	What a checker has to report back. `validateFace`’s verdict satisfies it.
`PocketCardDrawer`	The slice of the host’s Pocket manager this needs. A real `PocketManager`
`PocketCardPress`	The part of a reported press this reads.

Type Aliases

Name	Summary
`CardCleanup`	What a draw handler leaves behind: what runs when the card leaves the screen.
`CardDrawHandler`	Called when the host puts a card on screen, with the sink to draw into.
`ChatCustomMessageRenderer`	Callback invoked by the host transport to render a custom chat message.
`ChatCustomMessageRendererParams`	Parameters passed to a chat custom message renderer. Structurally matches
`ChatCustomMessageRenderingRequestHandler`	Product callback that streams renderer trees for one custom chat message.
`CustomRendererNode`	A node in a product-rendered tree. Container variants recurse through
`CustomRendererNode`	A node in a product-rendered tree. Container variants recurse through
`FaceChecker`	Checks a face before it reaches the host.
`PocketCardElement`	What to draw, or a function of the request the host made.

Functions

`Box()`


Box(__namedParameters: PropsWithChildren<BoxProps>): ReactElement<{ background?: Background; blendingMode?: BlendingMode; border?: BorderStyle; contentAlignment?: ContentAlignment; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; margin?: Padding; minHeight?: Size; minWidth?: Size; opacity?: number; padding?: Padding; width?: Size }, string | JSXElementConstructor<any>>

`Button()`


Button(__namedParameters: PropsWithChildren<ButtonProps>): ReactElement<{ background?: Background; blendingMode?: BlendingMode; border?: BorderStyle; clickAction: string | undefined; enabled?: boolean; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; loading?: boolean; margin?: Padding; minHeight?: Size; minWidth?: Size; opacity?: number; padding?: Padding; text: string; variant?: ButtonVariant; width?: Size }, string | JSXElementConstructor<any>>

`Column()`


Column(__namedParameters: PropsWithChildren<ColumnProps>): ReactElement<{ background?: Background; blendingMode?: BlendingMode; border?: BorderStyle; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; horizontalAlignment?: HorizontalAlignment; margin?: Padding; minHeight?: Size; minWidth?: Size; opacity?: number; padding?: Padding; verticalArrangement?: Arrangement; width?: Size }, string | JSXElementConstructor<any>>

`createRenderer()`


createRenderer(__namedParameters: RendererParams): { mount: unknown; unmount: unknown }

`drawPocketCard()`

Draw cardId for as long as the host keeps the card on screen.

The tree stays live rather than answering once: state changes inside it redraw the card through the same sink, and a press comes back to the handler that asked for it. The host tears the tree down when the card leaves, and puts a fresh one up if the card returns, so state that must outlive a card belongs above this rather than inside the tree.

element may be a function of the CardRender the host sent, which is the only way to read the payload it echoes back.

Giving the returned registration up also unmounts a tree that is on screen at the time. The host’s own registration only stops future draws, so without this the tree would stay mounted and keep sending faces into a body nobody asked for any more.


drawPocketCard(pocket: PocketCardDrawer, cardId: string, element: PocketCardElement, options: DrawPocketCardOptions = {}): CardDrawRegistration

`Effect()`


Effect(__namedParameters: PropsWithChildren<EffectProps>): ReactElement<{ effect: "Rainbow" }, string | JSXElementConstructor<any>>

`Image()`


Image(props: ImageProps): ReactElement<ImageProps, string | JSXElementConstructor<any>>

`matchChatCustomRenderers()`

Select a registered renderer using the custom message’s product-defined type.


matchChatCustomRenderers(renderers: Readonly<Record<string, ChatCustomMessageRenderer>>): ChatCustomMessageRenderingRequestHandler

`registerChatMessageRenderer()`


registerChatMessageRenderer(mapPayload: (payload: Uint8Array) => Payload, renderFn: (params: Omit<ChatCustomMessageRendererParams<NoInfer<Payload>>, "subscribeActions">) => ReactNode): ChatCustomMessageRenderer

Parameters

mapPayload: Map function to convert the payload to the desired type.
renderFn: Receives message params and returns a React element tree.

Returns

A callback compatible with a chat custom message rendering request handler.

`Row()`


Row(__namedParameters: PropsWithChildren<RowProps>): ReactElement<{ background?: Background; blendingMode?: BlendingMode; border?: BorderStyle; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; horizontalArrangement?: Arrangement; margin?: Padding; minHeight?: Size; minWidth?: Size; opacity?: number; padding?: Padding; verticalAlignment?: VerticalAlignment; width?: Size }, string | JSXElementConstructor<any>>

`Spacer()`


Spacer(props: BaseWidgetProps): ReactElement<BaseWidgetProps, string | JSXElementConstructor<any>>

`Text()`


Text(__namedParameters: PropsWithChildren<TextProps>): ReactElement<{ background?: Background; blendingMode?: BlendingMode; border?: BorderStyle; color?: ColorToken; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; margin?: Padding; minHeight?: Size; minWidth?: Size; opacity?: number; padding?: Padding; style?: TypographyStyle; width?: Size }, string | JSXElementConstructor<any>>

`TextField()`


TextField(__namedParameters: TextFieldProps): ReactElement<{ background?: Background; blendingMode?: BlendingMode; border?: BorderStyle; enabled?: boolean; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; label?: string; margin?: Padding; minHeight?: Size; minWidth?: Size; opacity?: number; padding?: Padding; placeholder?: string; value: string; valueChangeAction: string | undefined; width?: Size }, string | JSXElementConstructor<any>>

Interfaces

`interface CardDrawRegistration`

Handle for one card’s registration.

Methods

`unsubscribe`


unsubscribe(): void

`interface CardRender`

Which card the host is asking for, and what it carried.

Properties

`cardId`

propertystring

`payload`

property`0x${string}`

`interface DrawPocketCardOptions`

Properties

`validate`

propertyoptionalFaceChecker

Check each face before it reaches the host.

Pass validateFace from @parity/product-sdk-renderer. Left out, no checker is referenced and none is bundled.

`interface FaceCheck`

What a checker has to report back. validateFace’s verdict satisfies it.

Properties

`errors`

propertyreadonly { code: string; message: string; path: string }[]

`warnings`

propertyreadonly { code: string; message: string; path: string }[]

`interface PocketCardDrawer`

The slice of the host’s Pocket manager this needs. A real PocketManager satisfies it, and so does anything else shaped like one.

Methods

`drawCard`


drawCard(cardId: string, draw: CardDrawHandler): CardDrawRegistration

`subscribeCardAction`

The host’s handle carries more than this; only giving the subscription back matters here.


subscribeCardAction(cardId: string, callback: (action: PocketCardPress) => void): { unsubscribe: unknown }

`interface PocketCardPress`

The part of a reported press this reads.

Deliberately not called PocketCardAction: the host’s type of that name also carries the render context, and two same named types of different shapes is worse than one honestly narrow one. A real PocketCardAction satisfies this.

Properties

`actionId`

propertystring

`payload`

property`0x${string}`

Type Aliases

`type CardCleanup`

What a draw handler leaves behind: what runs when the card leaves the screen.


type CardCleanup = () => void | void

`type CardDrawHandler`

Called when the host puts a card on screen, with the sink to draw into.


type CardDrawHandler = (send: (face: RendererNode) => void, render: CardRender) => CardCleanup | Promise<CardCleanup>

`type ChatCustomMessageRenderer`

Callback invoked by the host transport to render a custom chat message.


type ChatCustomMessageRenderer = (params: ChatCustomMessageRendererParams, render: (node: RendererNode) => void) => VoidFunction

`type ChatCustomMessageRendererParams`

Parameters passed to a chat custom message renderer. Structurally matches the host-side rendering request contract so any transport implementation can invoke the callback.


type ChatCustomMessageRendererParams = unknown

`type ChatCustomMessageRenderingRequestHandler`

Product callback that streams renderer trees for one custom chat message.


type ChatCustomMessageRenderingRequestHandler = (request: ChatCustomMessageRendererParams) => ObservableSource<RendererNode>

`type CustomRendererNode`

A node in a product-rendered tree. Container variants recurse through children.


type CustomRendererNode = Codec<RendererNode>

`type CustomRendererNode`

A node in a product-rendered tree. Container variants recurse through children.


type CustomRendererNode = { tag: "Nil"; value?: undefined } | { tag: "String"; value: { text: string } } | { tag: "Box"; value: { children: RendererNode[]; modifiers: Modifier[]; props: BoxProps } } | { tag: "Column"; value: { children: RendererNode[]; modifiers: Modifier[]; props: ColumnProps } } | { tag: "Row"; value: { children: RendererNode[]; modifiers: Modifier[]; props: RowProps } } | { tag: "Spacer"; value: { modifiers: Modifier[] } } | { tag: "Text"; value: { children: RendererNode[]; modifiers: Modifier[]; props: TextProps } } | { tag: "Button"; value: { children: RendererNode[]; modifiers: Modifier[]; props: ButtonProps } } | { tag: "TextField"; value: { modifiers: Modifier[]; props: TextFieldProps } } | { tag: "Image"; value: { modifiers: Modifier[]; props: ImageProps } } | { tag: "Effect"; value: { children: RendererNode[]; props: EffectProps } }

`type FaceChecker`

Checks a face before it reaches the host.

Injected rather than imported so the checker is absent from a bundle that never asks for one. An eager import cannot be shaken out, because the reference sits in this module either way, and a worker bundle is a single file with no code splitting to hide it behind.

Pass validateFace from @parity/product-sdk-renderer, or wrap it to fix a host: (face) => validateFace(face, { host: androidLimits }).


type FaceChecker = (face: RendererNode) => FaceCheck

`type PocketCardElement`

What to draw, or a function of the request the host made.


type PocketCardElement = ReactNode | (render: CardRender) => ReactNode