Skip to main content

IClassicRenderProps interface

📖 Description​

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

📃 Type declaration​

interface IClassicRenderProps {
  id: string;Readonly
  l10n: L10n.Namespace;Readonly
  styles: IClassicStyles;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
  tabIndex: number;Readonly
  isFailed: boolean;Readonly
  isPage: 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
  onSubmit: (() => void) | undefined;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


🏷ī¸ isPage​

Contains if the runner is in page mode.

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​

IClassicStyles


🏷ī¸ tabIndex​

Retrieves a tab index value used for sequential keyboard navigation (usually with the Tab key, hence the name). Each time this property is retrieved, it is incremented by 1.

Type​

number


🏷ī¸ 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​

NameTypeOptionalDescription
elementHTMLElement | undefinedNoReference 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​

NameTypeOptionalDescription
eFocusEventNoReference 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​

NameTypeOptionalDescription
eFocusEventNoReference to the event interface.

🔧 markdownifyToImage​

Parses a markdown string to a valid image URL.

Signature​

(md: string) => string

Parameters​

NameTypeOptionalDescription
mdstringNoSpecifies 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​

NameTypeOptionalDescription
mdstringNoSpecifies the markdown string to process.
lineBreaksbooleanYesSpecifies 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​

NameTypeOptionalDescription
mdstringNoSpecifies 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​

NameTypeOptionalDescription
mdstringNoSpecifies the markdown string to process.

Return value​

Returns the parsed URL.


🔧 onSubmit​

This function should be invoked when a control wants to submit its value.

Signature​

() => void