# lit-element-context

> Context for lit-element components

Latest version **0.2.3** (published 2024-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install lit-element-context
pnpm add lit-element-context
yarn add lit-element-context
bun add lit-element-context
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2024-05-17 |
| First published | 2020-12-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | s1owjke |
| Maintainers | s1owjke |
| Keywords | webcomponents, lit-element, context |

## Links

- npm: https://www.npmjs.com/package/lit-element-context
- Homepage: https://github.com/s1owjke/lit-element-context
- npm.io page: https://npm.io/package/lit-element-context

## Dependencies (1)

- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.1

## Recent versions

- 0.2.3 (latest) — 2024-05-17
- 0.2.2 — 2024-05-17
- 0.2.1 — 2023-03-08
- 0.2.0 — 2023-02-12
- 0.1.1 — 2020-12-14
- 0.1.0 — 2020-12-08

## README

# LitElement Context

[![Published on npm](https://img.shields.io/npm/v/lit-element-context?color=brightgreen)](https://www.npmjs.com/package/lit-element-context) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

A set of [class mixin functions](https://alligator.io/js/class-composition/#composition-with-javascript-classes) to provide and inject multiple contexts for lit-element, doesn't require any extra components for that.

## Install

Using NPM:

```shell
npm install lit-element-context
```

Using YARN:

```shell
yarn add lit-element-context
```

## Usage

An example app also available on [codesandbox](https://codesandbox.io/s/lit-element-context-demo-i7f8u?file=/src/app.js)

```javascript
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>
    `;
  }
}
```

---
_Source: https://npm.io/package/lit-element-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._