Wrapper to use webcomponents in React

ΒΏWhat is @atomico/react?

It is a Wrapper to eliminate React's own problems when rendering webcomponents, with @atomico/react you can:

  1. Using your webcomponent's type declarations in React/Preact

  2. Synchronize the events of your webcomponents with React

  3. Composition from React using children and slots

  4. Use SSR of your webcomponents in React/Preact based environments for example Next.js

When to use @atomico/react?

We recommend using Atomico/react when looking to support React or Preact from your webcomponents built with Atomico.

We also support vue with @atomico/vue

@atomico/react vs other solutions?

With Atomico/react it's really easy to use, example:

import { auto } from "@atomico/react";
import { MyComponent as _MyComponent } from "./my-component.js";

export const MyComponent = auto( _MyComponent );


import { auto } from "@atomico/react";
import { HTMLMyComponent } from "./my-component.js";

export const MyComponent = auto( HTMLMyComponent );


We invite you to meet @atomico/exports to automate the generation of wrappers for your webcomponents


Last updated