element-vir
Version:
Heroic. Reactive. Declarative. Type safe. Web components without compromise.
36 lines (35 loc) • 1.01 kB
JavaScript
import { when } from '../../lit-exports/all-lit-exports.js';
/**
* A directive that, given a condition, chooses between two inputs: `ifTrue` and `ifFalse`. If
* `ifFalse` is omitted (which is allowed), the false case defaults to `undefined`, which won't get
* rendered at all inside of an HTML template.
*
* @category Directives
* @example
*
* ```ts
* import {html, defineElement, renderIf} from 'element-vir';
*
* const MyElement = defineElement()({
* tagName: 'my-element',
* render() {
* return html`
* <div>
* ${renderIf(
* Math.random() > 0.5,
* html`
* True!
* `,
* html`
* False!
* `,
* )}
* </div>
* `;
* },
* });
* ```
*/
export function renderIf(condition, ifTrue, ifFalse) {
return when(condition, () => ifTrue, () => ifFalse);
}