LitElement Context

A set of class mixin functions to provide and inject multiple contexts for lit-element, doesn't require any extra components for that.

Install

Using NPM:

npm install lit-element-context

Using YARN:

yarn add lit-element-context

Usage

An example app also available on codesandbox

import { LitElement, html } from "lit";
import { ProviderMixin, ConsumerMixin } from "lit-element-context";

class App extends ProviderMixin(LitElement) {
  constructor() {
    super();

    this.name = "hello";
    this.setName = (value) => {
      this.name = value;
    };
  }

  // provided values must be specified as properties to keep them updated
  static get properties() {
    return {
      name: String,
      setName: Function,
    };
  }

  // specify which properties will be available in the context
  static get provide() {
    return ["name", "setName"];
  }

  render() {
    return html`
      <div>
        <h1>Lit-element context</h1>
        <p>Current name: ${this.name}</p>
        <input-component></input-component>
      </div>
    `;
  }
}

class Input extends ConsumerMixin(LitElement) {
  static get properties() {
    return {
      name: String,
      setName: Function,
    };
  }

  // inject properties that we need from context
  static get inject() {
    return ["name", "setName"];
  }

  render() {
    return html`
      <div>
        <label>Name:</label>
        <input .value=${this.name} @input=${(event) => this.setName(event.target.value)} />
      </div>
    `;
  }
}