`@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()`	—
`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()`	—

Type Aliases

Name	Summary
`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

Functions

`Box()`


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

`Button()`


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

`Column()`


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

`createRenderer()`


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

`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; border?: BorderStyle; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; horizontalArrangement?: Arrangement; margin?: Padding; minHeight?: Size; minWidth?: Size; 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; border?: BorderStyle; color?: ColorToken; fillMaxHeight?: boolean; fillMaxWidth?: boolean; height?: Size; margin?: Padding; minHeight?: Size; minWidth?: Size; padding?: Padding; style?: TypographyStyle; width?: Size }, string | JSXElementConstructor<any>>

`TextField()`


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

Type Aliases

`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 } }