Scrivito.WidgetTag

Component for customizing the wrapper tag for a widget.

This component lets you customize the wrapper tag for a widget by specifying the kind of tag to use (e.g. <h1>, <li> etc.) and its attributes like style, class, etc.

Props

  • tag (String) – determines the HTML tag to be used. Defaults to "div".
  • [New in 1.52.0]ref (React.Ref) – React’s ref object or callback. Provides access to the underlying DOM element, enabling low-level DOM interactions. Default: undefined.
  • Any other props are forwarded to the rendered HTML tag. This allows the developer to provide style, className, data- or other attributes for the tag.

  • This component is intended to be used exclusively as the top-level element inside a Widget component.

    If WidgetTag is used anywhere else (i.e. outside a widget component or in a widget component, but not in top-level position) it will render nothing, and a warning will be logged.

    If a widget component does not use WidgetTag as its top-level component, it will automatically be wrapped in a <div> element as the default.

Since, by default, Scrivito renders each widget inside a <div> tag, a typical use case for Scrivito.WidgetTag is to render a widgetlist attribute as a <ul> list, in which each widget is wrapped in an <li> tag:

Another typical use case is to add custom CSS classes, inline-styles or data attributes to the outermost <div> of a widget: