@open-wc/context-protocol

0.0.9 • Public • Published

@open-wc/context-protocol

A Lit compatible implementation of the context-protocol community protocol.

Installation

npm install --save @open-wc/context-protocol

Usage

A component that implements the ProviderMixin will become a Provider of data and a component that implements the ConsumerMixin will become a Consumer of data.

import { ProviderMixin } from "@open-wc/context-protocol";

export class ProviderElement extends ProviderMixin(HTMLElement) {
  // Set any data contexts here.
  contexts = {
    "number-of-unread-messages": () => {
      return 0;
    },
  };

  async connectedCallback() {
    // It's also possible to provide context at any point using `updateContext`.

    const response = await fetch("/api/messages/");
    const data = await response.json();
    this.updateContext("number-of-unread-messages", data.unreadCount);
  }
}
import { ConsumerMixin } from "@open-wc/context-protocol";

export class ConsumerElement extends ConsumerMixin(HTMLElement) {
  contexts = {
    // Fetch contexts that we care about and subscribe to any changes.
    "number-of-unread-messages": (count: number) => {
      this.textContent = `${count} unread messages!`;
    },
  };

  connectedCallback() {
    // It's also possible to get any context on demand without subscribing.
    this.textContent = this.getContext("number-of-unread-messages");
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @open-wc/context-protocol

Weekly Downloads

1

Version

0.0.9

License

ISC

Unpacked Size

18.5 kB

Total Files

24

Last publish

Collaborators

  • passle
  • d4kmor
  • larsdenbakker
  • modern-web