IChatRenderProps interface

📖 Description

Interface that specifies the props for the block renderer. Used when creating custom blocks.

📃 Type declaration

interface IChatRenderProps {
  id: string;Readonly
  l10n: L10n.Namespace;Readonly
  styles: IChatStyles;Readonly
  attachments: IRunnerAttachments | undefined;Readonly
  view: "live" | "test" | "preview";Readonly
  name: JSX.Element | undefined;Readonly
  description: JSX.Element | undefined;Readonly
  explanation: JSX.Element | undefined;Readonly
  label: JSX.Element | undefined;Readonly
  placeholder: string;Readonly
  submitLabel: string;Readonly
  isFailed: boolean;Readonly
  ariaDescribedBy: string | undefined;Readonly
  ariaDescription: JSX.Element | undefined;Readonly
  focus: (e: FocusEvent) => void;Function
  blur: (e: FocusEvent) => void;Function
  autoFocus: (element: HTMLElement | null) => void;Function
  markdownifyToJSX: (md: string, lineBreaks?: boolean) => JSX.Element;Function
  markdownifyToURL: (md: string) => string;Function
  markdownifyToImage: (md: string) => string;Function
  markdownifyToString: (md: string) => string;Function
}

🖱️ Hover with the mouse over a property name for a tooltip with the description of that property. Click it for more information.

🗃️ Properties

---

🏷️ ariaDescribedBy

Contains a aria-describedby identifier when there is an ariaDescription set for the block.

Type

string

---

🏷️ ariaDescription

Contains an automatic generated aria description for the elements labeled with the ariaDescribedBy identifier.

Type

JSX.Element | undefined

---

🏷️ attachments

Reference to the attachments handler for processing file uploads.

Type

IRunnerAttachments

tip

Have a look at the Handling file uploads guide to learn how to use this feature.

---

🏷️ description

Contains the description of the block as a JSX.Element. Any markdown used in the description is already processed. Most blocks implement this property and store the description of the block in it.

Type

JSX.Element | undefined

---

🏷️ explanation

Contains the explanation of the block as a JSX.Element. Any markdown used in the explanation is already processed. Most blocks implement this property and store the explanation of the block in it.

Type

JSX.Element | undefined

---

🏷️ id

Contains a unique id (key) for the block.

Type

string

---

🏷️ isFailed

Contains if the block validation has failed.

Type

boolean

---

🏷️ l10n

Contains a reference to the l10n (translation) namespace. This namespace contains the gettext functions for translating text.

Type

L10n.Namespace

Example

l10n._("Text to be translated");
l10n._n("1 car", "%1 cars", 10);

---

🏷️ label

Contains the label of the block as a JSX.Element. Any markdown used in the label is already processed.

Type

JSX.Element | undefined

---

🏷️ name

Contains the name of the block as a JSX.Element. Any markdown used in the name is already processed. Most blocks implement this property and store the name or title of the block in it.

Type

JSX.Element | undefined

---

🏷️ placeholder

Contains the placeholder of the block.

Type

string

---

🏷️ styles

Reference to the styles of the runner.

Type

IChatStyles

---

🏷️ submitLabel

Translated label for the submit button. The submit button is shown in the input area of the block.

Type

string

---

🏷️ view

Contains the current view mode of the runner. It can be one of the following values:

• live: The form is running in normal (production) mode;
• test: The form is running in test mode;
• preview: The form is running in preview mode.

Type

"live" | "test" | "preview"

▶️ Functions

---

🔧 autoFocus

This function should be invoked to indicate that an element is able to receive auto focus. A reference to the element should be provided.

Signature

(element: HTMLElement | null) => void

Parameters

Name	Type	Optional	Description
element	HTMLElement | undefined	No	Reference to an element that is able to gain input focus.

---

🔧 blur

This function should be invoked to indicate that an element in the block lost focus. This is usually attached to the blur event of input elements used in the block.

Signature

(e: FocusEvent) => void

Parameters

Name	Type	Optional	Description
e	FocusEvent	No	Reference to the event interface.

---

🔧 focus

This function should be invoked to indicate that an element in the block gained focus. This is usually attached to the focus event of input elements used in the block.

Signature

(e: FocusEvent) => void

Parameters

Name	Type	Optional	Description
e	FocusEvent	No	Reference to the event interface.

---

🔧 markdownifyToImage

Parses a markdown string to a valid image URL.

Signature

(md: string) => string

Parameters

Name	Type	Optional	Description
md	string	No	Specifies the markdown string to process.

Return value

Returns the image URL.

---

🔧 markdownifyToJSX

Parses a markdown string to formatted JSX.

Signature

(md: string, lineBreaks?: boolean) => JSX.Element

Parameters

Name	Type	Optional	Description
md	string	No	Specifies the markdown string to process.
lineBreaks	boolean	Yes	Specifies if line breaks are supported or not (default is true).

Return value

Returns the markdown JSX.Element.

---

🔧 markdownifyToString

Parses a markdown string to a plain string.

Signature

(md: string) => string

Parameters

Name	Type	Optional	Description
md	string	No	Specifies the markdown string to process.

Return value

Returns the parsed string.

---

🔧 markdownifyToURL

Parses a markdown string to a valid URL.

Signature

(md: string) => string

Parameters

Name	Type	Optional	Description
md	string	No	Specifies the markdown string to process.

Return value

Returns the parsed URL.