English
Guides
@atomico
🤝
Atomico and React
React and webcomponents
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:
1
import React from "react";
2
import "@formilk/components";
3
4
export default function App() {
5
return (
6
<fm-button>Click!<fm-button>
7
);
8
}
Copied!
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.
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.
Atomico inside Next.js
All webcomponents work in Next if it escapes from SSR
Example of custom tag usage
1
import "@formilk/components/button";
2
3
export default function Home() {
4
return (
5
<div>
6
<fm-button name="Matias">
7
<h1>Hello Next.js</h1>
8
</fm-button>
9
</div>
10
);
11
}
Copied!
Example of use of the wrapper.
Next.js
wrapper-button.js
1
import dynamic from "next/dynamic";
2
3
const Button = dynamic(() => import("./wrapper-button.js"), {
4
ssr: false,
5
});
6
7
export default function Home() {
8
return (
9
<div>
10
<Button name="Matias">
11
<h1>Hello Next.js</h1>
12
</Button>
13
</div>
14
);
15
}
Copied!
1
import { auto } from "@atomico/react/auto";
2
import { Button } from "@formilk/components/button";
3
4
export default auto(Button);
Copied!
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 2mo ago
Copy link
Edit on GitHub