Scrivito.WidgetTag

Component for customizing the wrapper tag for a widget.

Copy
<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: 

Copy
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:

Copy
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>
  );
});