^{Social Media Photo by pure julia on Unsplash}

Switch Part

This is a directive of lit-html for switch parts of your template. Change any part of your template without re-rendering.

🔗 See the demo

Installation

Install from NPM or use from Unpkg CDN

Npm

npm install --save lit-directive-switch-part

Unpkg

import {switchPart} from 'https://unpkg.com/lit-directive-switch-part?module'

# switchPart(store, options)

Arguments

• store: Key value store. The Value can by a function for a lazy rendering; the function recibe previus key used. If cache is enabled, the function is called once and cache result for next setter.
• options:
  • default: Default key for first rendering. Default value is "default"
  • cache: Enable/Disable cache for lazy rendering. Default value is "true"
  • resolver(store, key): Resolver function

API

case(key)

Switch to another content associated to key.

clear()

Set empty content in content part.

Common example

import {render, html} from 'lit-html'
import {switchPart} from 'lit-directive-switch-part';

const content = switchPart({
  a: html`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
  b: html`Ut tempor tellus at nibh blandit rutrum.`,
  c: html`Nam vitae diam consequat, tristique lectus sed, ultricies erat.`
}, {default: 'a'});

render(html`
  <h1>Basic demo</h1>
  <ul>
    <li><button type="button" @click=${_ => content.case('a')}>Lorem</buttom></li>
    <li><button type="button" @click=${_ => content.case('b')}>Ut</buttom></li>
    <li><button type="button" @click=${_ => content.case('c')}>Nam</buttom></li>
    <li><button type="button" @click=${_ => content.clear()}>Clear</buttom></li>
  </ul>
  <hr>
  ${content}
  `, document.querySelector('#app'));

Lazy render example

import {render, html} from 'lit-html'
import {switchPart} from 'lit-directive-switch-part';

const content = switchPart({
  a: () => html`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
  b: () => html`Ut tempor tellus at nibh blandit rutrum.`,
  c: () => html`Nam vitae diam consequat, tristique lectus sed, ultricies erat.`
}, {default: 'a', cache: true});

render(html`
  <h1>Lazy render demo</h1>
  <ul>
    <li><button type="button" @click=${_ => content.case('a')}>Lorem</buttom></li>
    <li><button type="button" @click=${_ => content.case('b')}>Ut</buttom></li>
    <li><button type="button" @click=${_ => content.case('c')}>Nam</buttom></li>
    <li><button type="button" @click=${_ => content.clear()}>Clear</buttom></li>
  </ul>
  <hr>
  ${content}
  `, document.querySelector('#app'));