Comment on page
🤝
Atomico and React
React has begun to support the use of webcomponents in an experimental way, this will allow to use custom tag with association of events and more, example:
import React from "react";
import "@formilk/components";
export default function App() {
return (
<fm-button>Click!<fm-button>
);
}
Advantages: The react team will take care of the coverage of this characteristic.
Disadvantages: (Optional) The maintainer of the component must declare the types of the custom tag.
Although the use of the custom tag is a way of instantiating the component, many times it does not define the import path at the time of its use, complicating the resolution of the component's origin, to avoid this we recommend the use of the Atomico wrapper for React.
- 1.Create a Wrapper component for the custom Element
- 2.Avoid react conflicts with webcomponents, such as association of events, attributes, properties and children.
- 3.Reflect the types declared in Atomic to React, valid for JSX or TSX
Coverage is automatic if you decide to share your package using @atomico/exports under the following export conditions.
All webcomponents work in Next if it escapes from SSR
import "@formilk/components/button";
export default function Home() {
return (
<div>
<fm-button name="Matias">
<h1>Hello Next.js</h1>
</fm-button>
</div>
);
}
Next.js
wrapper-button.js
import dynamic from "next/dynamic";
const Button = dynamic(() => import("./wrapper-button.js"), {
ssr: false,
});
export default function Home() {
return (
<div>
<Button name="Matias">
<h1>Hello Next.js</h1>
</Button>
</div>
);
}
import { auto } from "@atomico/react/auto";
import { Button } from "@formilk/components/button";
export default auto(Button);
Remember if you use the
auto module, it should always be imported first than the customElement to use, otherwise auto will generate an id as a custom tag to instantiate the component within reactLast modified 4mo ago