@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 "@atomico/react/proxy";
2
import { wrapper } from "@atomico/react";
3
import { HTMLMyComponent } from "./my-component.js";
4
5
export const MyComponent = wrapper("my-element", 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 "@atomico/react/proxy";
2
import { auto } from "@atomico/react";
3
import { HTMLMyComponent } from "./my-component.js";
4
5
export const MyComponent = auto( HTMLMyComponent );
Copied!

@atomico/exports

Another way to export your webcomponents to React is using @atomico/exports which will automatically detect the webcomponents and create the wrappers using @atomico/react.
Some benefits of @atomico/exports are:
  1. 1.
    export via expressions, example ./src/**.tsx
  2. 2.
    create the package.json#exports automatically
  3. 3.
    create the types and associate the export paths for Typescript.
  4. 4.
    group the sub dependencies of the workspace
  5. 5.
    minimize the JS code.
We invite you to review in detail the @atomico/exports package for its use
Copy link
Edit on GitHub