lit-props

Lit TypeScript properties made easy. Zero dependencies.

Without lit-props:

import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('my-element')
export class MyElement extends LitElement {
  @property({ type: Object }) obj = {};
  @property({ type: Number }) id = 0;
  @property({ type: Boolean, reflect: true }) reflectedBool = false;
  @state() protected _counter = 0;
}

With lit-props:

import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import * as lp from 'lit-props';

@customElement('my-element')
export class MyElement extends LitElement {
  @lp.object obj = {};
  @lp.number id = 0;
  @lp.reflected.bool reflectedBool = false;
  @lp.state protected _counter = 0;
}

Installation

npm i lit-props

Supported property types

string
bool
number
array
object

reflected
  string
  bool
  number
  array
  object

State is also supported via state.