import React, { forwardRef } from 'react';
import type { PolyRefFunction } from 'react-polymorphed';

const polyForwardRef = forwardRef as PolyRefFunction;

const PolyComponent = polyForwardRef<'div', {}>((props, ref) => {
    const { as: As = 'div', ...rest } = props;
    return <As ref={ref} {...rest} />;
});

const App = () => {
    return (
        <>
            {/* 🙂 event: React.MouseEvent<HTMLDivElement, MouseEvent> */}
            <PolyComponent onClick={(event) => console.log(event)} />
            {/* 🙂 event: React.MouseEvent<HTMLAnchorElement, MouseEvent> */}
            <PolyComponent as="a" onClick={(event) => console.log(event)} />
        </>
    );
};

import React from 'react';
import { polymorphicFactory } from '@polymorphic-factory/react';

const poly = polymorphicFactory();

const App = () => {
    return (
        <>
            {/* 🙂 event: React.MouseEvent<HTMLDivElement, MouseEvent> */}
            <poly.div onClick={(event) => console.log(event)} />
            {/* 😔 event: any */}
            <poly.div as="a" onClick={(event) => console.log(event)} />
        </>
    );
};