Skip to main content

IAutoscrollRenderProps interface

๐Ÿ“– Descriptionโ€‹

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

๐Ÿ“ƒ Type declarationโ€‹

interface IAutoscrollRenderProps {
  index: number;Readonly
  id: string;Readonly
  l10n: L10n.Namespace;Readonly
  styles: IAutoscrollStyles;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
  isActivated: boolean;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
  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


๐Ÿท๏ธ indexโ€‹

Contains the index (or question number) of the block.

Typeโ€‹

number


๐Ÿท๏ธ isActivatedโ€‹

Contains if the block is active.

Typeโ€‹

boolean


๐Ÿท๏ธ 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โ€‹

IAutoscrollStyles


๐Ÿท๏ธ 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.