🤝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:

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.

Atomico wrapper for React

Atomico the package @atomic/react allows:

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

import  "@formilk/components/button";

export default function Home() {
  return (
    <div>
      <fm-button name="Matias">
        <h1>Hello Next.js</h1>
      </fm-button>
    </div>
  );
}

Example of use of the wrapper.

Next.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>
  );
}

wrapper-button.js

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 react