description |
---|
Wrapper to use webcomponents in React |
{% embed url="https://github.com/atomicojs/react" %}
It is a Wrapper to eliminate React's own problems when rendering webcomponents, with @atomico/react you can:
- Using your webcomponent's type declarations in React/Preact
- Synchronize the events of your webcomponents with React
- Composition from React using children and slots
- Use SSR of your webcomponents in React/Preact based environments for example Next.js
We recommend using Atomico/react when looking to support React or Preact from your webcomponents built with Atomico.
{% hint style="success" %} We also support vue with @atomico/vue {% endhint %}
With Atomico/react it's really easy to use, example:
{% tabs %} {% tab title="@atomico/react" %}
import { auto } from "@atomico/react";
import { MyComponent as _MyComponent } from "./my-component.js";
export const MyComponent = auto( _MyComponent );
{% endtab %}
{% tab title="@lit-labs/react" %}
import * as React from 'react';
import { createComponent } from '@lit-labs/react';
import { MyComponent as _MyComponent } from './my-component.js';
export const MyComponent = createComponent({
tagName: 'my-component', //⚠️ requires the tagName
elementClass: _MyComponent,
react: React, //⚠️ requires react module
events: { //⚠️ requires events
onactivate: 'activate',
onchange: 'change',
},
});
{% endtab %} {% endtabs %}
import { auto } from "@atomico/react";
import { HTMLMyComponent } from "./my-component.js";
export const MyComponent = auto( HTMLMyComponent );
{% embed url="https://codesandbox.io/s/atomico-react-example-cizcy" %}
We invite you to meet @atomico/exports to automate the generation of wrappers for your webcomponents
{% content-ref url="introduction/" %} introduction {% endcontent-ref %}