TypeScript Polymorphic Components in React with conditional props

Question

I'm trying to write a Polymorphic component in React that supports both host elements such as (div, button, etc) and custom React components.

but there's a constraint of needing whatever component is passed in to the as prop that it must have an onClick prop

here's my work in progress.

import React, { useCallback, useRef, useLayoutEffect } from 'react';

export type GaClickTrackerProps<Type extends React.ElementType> = {
  as: Type;
  fieldsObject: {
    hitType: UniversalAnalytics.HitType; // 'event'
    eventCategory: string;
    eventAction: string;
    eventLabel?: string | undefined;
    eventValue?: number | undefined;
    nonInteraction?: boolean | undefined;
  };
  onClick?: (...args: any[]) => any;
} & React.ComponentPropsWithoutRef<Type>;

export function GaClickTracker<Type extends React.ElementType>({
  onClick,
  fieldsObject,
  as: Component,
  ...props
}: GaClickTrackerProps<Type>) {
  const fieldsObjectRef = useRef(fieldsObject);
  const onClickRef = useRef(onClick);
  useLayoutEffect(() => {
    onClickRef.current = onClick;
    fieldsObjectRef.current = fieldsObject;
  });

  const handleClick: React.MouseEventHandler<Type> = useCallback((event) => {
    onClickRef.current?.(event);
    if (fieldsObjectRef.current) {
      ga('send', fieldsObjectRef.current);
    }
  }, []);

  return (
    <Component onClick={handleClick} {...props} />
  );
}

Is not great to have "polymorphic components" in React, mainly because you're just one step away of just calling React.createElement directly instead of using JSX. If you still really want to do this, you can use JSX.InstrinsicElements[TagName] and get the properties expected from the underlying HTML element you want to wrap, and then use Omit<..., "onClick"> to omit the original onClick that's optional and set yours (which is also not recommended). — loucyx
– loucyx, Commented Mar 14, 2022 at 4:33
what are you on about? several libraries do this. such as styled components/emotion, what you're suggesting only works for host components, not custom ones. — lifeiscontent
– lifeiscontent, Commented Mar 14, 2022 at 16:35

loucyx · Accepted Answer · 2022-03-14 23:57:27Z

Instead of going into the "polymorphic component" direction, for this particular issue it would be far better to have an util function like this:

import type { MouseEventHandler } from "react";

type Fields = {
    eventAction: string;
    eventCategory: string;
    eventLabel?: string | undefined;
    eventValue?: number | undefined;
    hitType: UniversalAnalytics.HitType;
    nonInteraction?: boolean | undefined;
};

export const sendAnalytics =
    (fields?: Fields) =>
    <Type>(handler?: MouseEventHandler<Type>): MouseEventHandler<Type> =>
    event => {
        handler?.(event); // We call the passed handler first

        // And we only call `ga` if the we have fields and the default wasn't prevented
        return !event.defaultPrevented && fields
            ? ga("submit", fields)
            : undefined;
    };

And then you can use it like this:

import { sendAnalytics } from "~/utils/sendAnalytics.js";

const sendIDKAnalytics = sendAnalytics({
    eventAction: "IDK",
    eventCategory: "IDK",
    hitType: "IDK",
});

export const TrackedButton = ({ onClick, ...props }) => (
    <button onClick={sendIDKAnalytics(onClick)} {...props} />
);

Being a curried function, you could even reuse the same settings in different components if you wanted. And if you want to "Reactify" it further, you could make it a hook, like useAnalytics and go from there.

The "polymorphic" approach would make it unnecessarily complex with no real gains to DX:

import { createElement } from "react";

// This:
const Polymorphic = ({ as: Component, ...props }) => <Component {...props} />;

// Is not different from just doing this:
const Polymorphic = ({ as, ...props }) => createElement(as, props);

// And when using any of those, your code would look something like this,
// which is not ideal:
<Polymorphic as="main">
    <Polymorphic as="nav">
        <Polymorphic as="a" href="https://example.com">
            Hello
        </Polymorphic>
    </Polymorphic>
</Polymorphic>;

Collectives™ on Stack Overflow

TypeScript Polymorphic Components in React with conditional props

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related