Generic web-component base class and framework specific wrapper.

Usage no npm install needed!

<script type="module">
  import webComponentWrapper from 'https://cdn.skypack.dev/web-component-wrapper';


Project status

npm npm downloads


code coverage

documentation website

Use case

Encapsulate your components as web-components.


Data can flow into a component via

  • External property set instance.value = 'value'
  • Trigger Events instance.triggerEvent('click')

Data can be communicated back via:

  • Properties console.log(instance.value)
  • Observable events instance.addEventListener('click', (event) => console.log(event.detail.value))

Configuring Data-Flow

A Web-Component-Wrapper component forwards (transformed) given properties into a wrapped react component via props and reads data via provided callbacks as part of props or as part of reacts ref object.