This library helps turning custom elements (web components) into React components.

With NPM:

npm i reactify-custom-elements

With Yarn:

yarn add reactify-custom-elements

Since you're reading this, you may have realized that React and custom elements (aka web components) aren't playing along very well. React handles every available native elements respectively and has therefor no knowledge whatsoever how a custom element is implemented and what properties, attributes and events it has.

What this library does is creating a middleman between those ends to make use of custom elements in React a little bit (actually a lot) easier. It can be done in two ways:

• Create a wrapper component (see API > createComponent)
• Use of a hook (see API > useCustomElement)

import * as React from "react";
import { createComponent } from "reactify-custom-elements";
import { CustomButtonElement } from "./customButtonElement";

interface CustomButtonProps {
    onPress?: () => void;
}

window.customElements.define("custom-button", CustomButtonElement);

const CustomButton = createComponent("custom-button", {
    forwardRef: true, // false
});

function App() {
    return (
        <CustomButton onPress={() => alert("TADA!")}>
            Hit me
        </CustomButton>
    );
}

function createComponent<
    E extends HTMLElement = HTMLElement,
    P extends {} = {}
>(
    elementName: string,
    options?: CreateComponentOptions
) : React.ForwardRefExoticComponent | (props: P) => React.Element

function useCustomElement<
    E extends HTMLElement = HTMLElement,
    P extends {} = {}
>(
    elementName: string,
    elementProps?: P,
    options?: UseCustomElementOptions
) : [
    element: React.ReactElement,
    ref: React.MutableRefObject<HTMLElement | null>
]