Skip to content

wc-context

wc-context is a Javascript library that implements a way to share data between Web Components (in fact, between any HTMLElement). While is inspired by React Context, hence the name, it is designed to fit the most common usage patterns in Web Components ecosystem.

Features

Small and fast

The code base is small and fast, just a thin layer on top of native events. No Internet Explorer support, avoiding meaningless extra code.

Flexible and comprehensive

It is possible to define context providers and consumers in many ways: Lit integration, Web Component mixin, Reactive Controllers, Dedicated elements and core API. All compatible with each other, allowing to mix and match in same project.

Also, does not limit how can be used:

  • Ability to provide or consume one or more contexts per element
  • Context can be provided or consumed by any HTML element
  • Context can be identified by string or unique identifier

Compatible

Conforms with the Context protocol

Works with Shadow DOM

The context can ben consumed in any level of child node tree regardless of shadow dom boundaries.

It also handles the timing issue when consuming a context inside a slotted content

Easy to implement unit tests

Most of the time there's no need of special handling to write unit tests. Just set the property that should receive the context value.

When the context is deep in the node tree or are not linked to a property use Lit contextProvider directive or the core API

Lazy loading context data

With ContextProvider (Reactive Controller) is possible to implement data lazy loading.

Well tested

100% code coverage

License

MIT

Copyright © 2018 - present Luiz Américo Pereira Câmara aka blikblum

Released under the MIT License.