lit-element-context

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

Install

npm install lit-element-context

Usage

An example app also available on codesandbox

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

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

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

    // we need to know what props can be changed to update the context
    static get properties() {
        return {
            name: String,
            setName: Function,
        };
    }

    // specify the parameters that 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,
        };
    }

    // props that will be passed from the 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>
        `;
    }
}

License

MIT