Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

Scrivito.WidgetTag

Component for customizing the wrapper tag for a widget.

<Scrivito.WidgetTag tag="li" {...props}> {/* Widget content */} </Scrivito.WidgetTag>

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".
  • 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:

Scrivito.provideWidgetClass('ListWidget', { attributes: { items: 'widgetlist' }, }); Scrivito.provideComponent('ListWidget', ({ widget }) => <Scrivito.ContentTag tag="ul" content={ widget } attribute="items" /> ); Scrivito.provideWidgetClass('ListItemWidget', { attributes: { title: 'string' }, }); Scrivito.provideComponent('ListItemWidget', ({ widget }) =>  <Scrivito.WidgetTag tag="li">    <Scrivito.ContentTag content={ widget } attribute="title" />  </Scrivito.WidgetTag> );

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

Scrivito.provideWidgetClass('ListItemWidget', { attributes: { title: 'string', color: 'string', }, }); Scrivito.provideComponent('ListItemWidget', ({ widget }) => { const color = widget.get('color'); return ( <Scrivito.WidgetTag tag="li" className={ color } style={ { color } } data-color={ color }> <Scrivito.ContentTag content={ widget } attribute="title" />   </Scrivito.WidgetTag> ); });