@atomico/react
Wrapper to use web components in React
GitHub - atomicojs/react
GitHub
This module provides 2 ways to create a wrapper for react, the generated wrapper fixes the following react problems when using webcomponents
  1. 1.
    fixes the association of events, any property that starts with the prefix in and its value is of the function type will be associated as an event of the component.
  2. 2.
    Children are always transmitted as nodes of the component.
  3. 3.
    references are always transmitted to the webcomponent

Example wrapper

Manual wrapping this requires knowing the tagName, Element and options
1
import { wrapper } from "@atomico/react";
2
import { HTMLMyComponent } from "./my-component.js";
3
4
const tagName = "my-component";
5
6
customElements.define(tagName, HTMLMyComponent);
7
8
export const MyComponent = wrapper(tagName, HTMLMyComponent);
Copied!
The second parameter for wrapper is optional, but will allow react to infer Atomico types, improving the Autocomplete and Typescript experience.

Example auto

Auto captures the parameters associated with the use of customElements.define to retrieve the tagName or generate an id as tagName, to instantiate the webcomponent.
1
import { auto } from "@atomico/react/auto";
2
import { Component as ElementComponent } from "./my-component";
3
4
export const Component = auto(ElementComponent);
Copied!
Last modified 24d ago
Copy link
Edit on GitHub