https://github.com/s1owjke/lit-element-context
Context for lit-element components
https://github.com/s1owjke/lit-element-context
context lit lit-element mixin web-components webcomponents
Last synced: 5 months ago
JSON representation
Context for lit-element components
- Host: GitHub
- URL: https://github.com/s1owjke/lit-element-context
- Owner: s1owjke
- License: mit
- Created: 2020-12-08T11:10:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-17T15:59:22.000Z (about 2 years ago)
- Last Synced: 2025-10-14T07:25:54.878Z (8 months ago)
- Topics: context, lit, lit-element, mixin, web-components, webcomponents
- Language: TypeScript
- Homepage:
- Size: 324 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LitElement Context
[](https://www.npmjs.com/package/lit-element-context) [](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`
Lit-element context
Current name: ${this.name}
`;
}
}
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`
Name:
this.setName(event.target.value)} />
`;
}
}
```