@sinchsmb/ui-kit/src/utils/isIntrinsicElement.ts

UI kit for SinchSMB frontend

import { ReactElement } from 'react';
import { isStyledComponent } from 'styled-components/macro';

/**
 * Checks that ReactElement is intrinsic element. See {@link JSX.IntrinsicElements}
 *
 * @example
 * ```ts
 * isIntrinsicElement(<span />) // true
 * isIntrinsicElement(<StyledSpan />) // true
 * isIntrinsicElement(<FunctionalComponent />) // false
 * isIntrinsicElement(<StyledFunctionalComponent />) // false
 * ```
 */
export function isIntrinsicElement(element: ReactElement) {
  if (typeof element.type === 'string') {
    // is regular tag
    return true;
  }
  if (isStyledComponent(element.type) && typeof element.type.target === 'string') {
    // is styled tag
    return true;
  }
  return false;
}