Lit Directives API reference for Semantic UI's Lit directives code API Reference

Lit Directives

Semantic UI builds on Lit’s directive system to provide reactive data binding, conditional rendering, iteration, and template rendering. These directives are used internally by the template system and are automatically applied based on your template syntax.

Advanced Use It is not recommended to use these directives directly unless you are building custom template functionality. The template syntax will automatically use the appropriate directive.

Directives

reactiveData

Handles reactive data bindings in templates. Updates the DOM automatically when reactive values change.

import { reactiveData } from '@semantic-ui/renderer';
reactiveData(expression, options)

Parameters

NameTypeRequiredDescription
expressionObjectYesExpression configuration object
optionsObjectNoDirective options

Expression Object

PropertyTypeRequiredDescription
valueFunctionYesFunction that returns the value
expressionstringYesOriginal template expression

Options Object

PropertyTypeDefaultDescription
ifDefinedbooleanfalseUse ifDefined directive
unsafeHTMLbooleanfalseUse unsafeHTML directive

Example

Template syntax

const expr = reactiveData({
  expression: 'count',
  value: () => count.get()
});

Equivalent Directive

const expr = reactiveData({
  expression: 'content',
  value: () => content.get()
}, {
  unsafeHTML: true
});

reactiveConditional

Handles conditional rendering in templates. Re-renders content when conditions change.

import { reactiveConditional } from '@semantic-ui/renderer';
reactiveConditional(options)

Parameters

NameTypeRequiredDescription
optionsObjectYesConditional rendering options

Options Object

PropertyTypeRequiredDescription
conditionFunctionYesCondition evaluation function
contentFunctionYesContent rendering function
branchesArrayNoAdditional else/elseif branches

Branch Object

PropertyTypeRequiredDescription
typestringYes’else’ or ‘elseif’
conditionFunctionNoCondition for ‘elseif’
contentFunctionYesContent rendering function

Example

// Template: {{#if isVisible}} content {{/if}}
const conditional = reactiveConditional({
  condition: () => isVisible.get(),
  content: () => html`<div>Visible Content</div>`,
  branches: [
    {
      type: 'else',
      content: () => html`<div>Hidden Content</div>`
    }
  ]
});

reactiveEach

Handles array iteration in templates. Re-renders when array content changes.

import { reactiveEach } from '@semantic-ui/renderer';
reactiveEach(options)

Parameters

NameTypeRequiredDescription
optionsObjectYesIteration options

Options Object

PropertyTypeRequiredDescription
overFunctionYesFunction returning array
contentFunctionYesItem rendering function
asstringNoVariable name for each item
indexAsstringNoCustom name for the loop index
elseFunctionNoContent to render if array empty

Example (basic)

// Template: {{#each items}} {{name}} {{/each}}
const list = reactiveEach({
  over: () => items.get(),
  content: (item) => html`<li>${item.name}</li>`,
  as: 'item'
});

Example (with else)

// Template:
// {{#each items}}
//   {{name}}
// {{else}}
//   No items available
// {{/each}}
const list = reactiveEach({
  over: () => items.get(),
  content: (item) => html`<li>${item.name}</li>`,
  as: 'item',
  else: () => html`<div class="empty-state">No items available</div>`
});

renderTemplate

Renders sub-templates within a template. Manages template lifecycle and cleanup.

import { renderTemplate } from '@semantic-ui/renderer';
renderTemplate(options)

Parameters

NameTypeRequiredDescription
optionsObjectYesTemplate rendering options

Options Object

PropertyTypeRequiredDescription
subTemplatesObjectYesAvailable templates
templateNamestringYesName of template to render
getTemplateFunctionNoDynamic template getter
dataObjectNoTemplate data context
parentTemplateTemplateNoParent template reference

Example

Template syntax

{> header data=headerData}

Equivalent directive

const template = renderTemplate({
  subTemplates: {
    header: HeaderTemplate
  },
  templateName: 'header',
  data: {
    title: 'Page Header'
  }
});

Usage in Templates

While these directives are typically used through template syntax, understanding how they work can be helpful for debugging or custom implementations.

Data Binding

Template Syntax

{ value }

Equivalent Directive

reactiveData({
  expression: 'value',
  value: () => value.get()
})

Conditional Rendering

Template syntax

{#if condition}
  content
{else}
  alternate
{/if}

Equivalent Directive

reactiveConditional({
  condition: () => condition.get(),
  content: () => html`content`,
  branches: [{
    type: 'else',
    content: () => html`alternate`
  }]
})

Iteration

Basic Iteration

Template syntax

{#each items as item}
  { item.name }
{/each}

Equivalent Directive

reactiveEach({
  over: () => items.get(),
  content: (item) => html`${item.name}`,
  as: 'item'
})

Iteration with Empty State

Template syntax

{#each items as item}
  { item.name }
{else}
  No items available
{/each}

Equivalent Directive

reactiveEach({
  over: () => items.get(),
  content: (item) => html`${item.name}`,
  as: 'item',
  else: () => html`No items available`
})

Iteration with Custom Index

Template syntax

{#each product, idx in products}
  { idx + 1 }. { product.name }
{/each}

Equivalent Directive

reactiveEach({
  over: () => products.get(),
  content: (product, idx) => html`${idx + 1}. ${product.name}`,
  as: 'product',
  indexAs: 'idx'
})

Sub-templates

Template syntax

{> header data=headerData}

Equivalent Directive

renderTemplate({
  templateName: 'header',
  data: headerData,
  subTemplates: availableTemplates
})
Previous
Lit Renderer