Lit DirectivesAPI reference for Semantic UI's Lit directivescodeAPI Reference
Categories

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

Name Type Required Description
expression Object Yes Expression configuration object
options Object No Directive options

Expression Object

Property Type Required Description
value Function Yes Function that returns the value
expression string Yes Original template expression

Options Object

Property Type Default Description
ifDefined boolean false Use ifDefined directive
unsafeHTML boolean false Use unsafeHTML directive
literalValue boolean false Pass value as-is without auto-invoking

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

Name Type Required Description
options Object Yes Conditional rendering options

Options Object

Property Type Required Description
condition Function Yes Condition evaluation function
content Function Yes Content rendering function
branches Array No Additional else/elseif branches

Branch Object

Property Type Required Description
type string Yes ‘else’ or ‘elseif’
condition Function No Condition for ‘elseif’
content Function Yes Content 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

Name Type Required Description
options Object Yes Iteration options

Options Object

Property Type Required Description
over Function Yes Function returning array
content Function Yes Item rendering function
as string No Variable name for each item
indexAs string No Custom name for the loop index
else Function No Content 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

Name Type Required Description
options Object Yes Template rendering options

Options Object

Property Type Required Description
subTemplates Object Yes Available templates
templateName string Yes Name of template to render
getTemplate Function No Dynamic template getter
data Object No Template data context
parentTemplate Template No Parent 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