Directives API

Directives from lit-html for advanced template features.

classMap

Applies classes conditionally.

import { classMap } from 'kaori.js';

<div classMap={{
  'active': isActive.value,
  'disabled': isDisabled.value
}}>

styleMap

Applies inline styles.

import { styleMap } from 'kaori.js';

<div style={{
  backgroundColor: color.value,
  width: `${width.value}px`
}}>

ifDefined

Only sets attribute if value is defined.

import { ifDefined } from 'kaori.js';

<img src={ifDefined(imageUrl.value)} alt="Image" />;

when

Conditional rendering directive.

import { when } from 'kaori.js';

<div>
  {when(
    condition.value,
    () => (
      <div>True</div>
    ),
    () => (
      <div>False</div>
    )
  )}
</div>;

choose

Multi-way conditional.

import { choose } from 'kaori.js';

<div>
  {choose(
    value.value,
    [
      [0, () => <div>Zero</div>],
      [1, () => <div>One</div>],
    ],
    () => (
      <div>Other</div>
    )
  )}
</div>;

repeat

List rendering with keys (used by For component).

import { repeat } from 'kaori.js';

<ul>
  {repeat(
    items.value,
    item => item.id,
    item => (
      <li>{item.name}</li>
    )
  )}
</ul>;

map

Maps an iterable to templates.

import { map } from 'kaori.js';

<ul>
  {map(items.value, item => (
    <li>{item}</li>
  ))}
</ul>;

TIP

Most of these directives are re-exported from lit-html. See lit-html documentation for more details.