@primer/react/lib-esm/Heading/Heading.js

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import React, { forwardRef, useEffect } from 'react';
import classes from './Heading.module.css.js';
import { jsx } from 'react/jsx-runtime';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
import Box from '../Box/Box.js';

const Heading = /*#__PURE__*/forwardRef(({
  as: Component = 'h2',
  className,
  variant,
  ...props
}, forwardedRef) => {
  const innerRef = React.useRef(null);
  useRefObjectAsForwardedRef(forwardedRef, innerRef);
  if (process.env.NODE_ENV !== "production") {
    /**
     * The Linter yells because it thinks this conditionally calls an effect,
     * but since this is a compile-time flag and not a runtime conditional
     * this is safe, and ensures the entire effect is kept out of prod builds
     * shaving precious bytes from the output, and avoiding mounting a noop effect
     */
    // eslint-disable-next-line react-compiler/react-compiler
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
        // eslint-disable-next-line no-console
        console.warn('This Heading component should be an instanceof of h1-h6');
      }
    }, [innerRef]);
  }
  if (props.sx) {
    return /*#__PURE__*/jsx(Box, {
      as: Component,
      className: clsx(className, classes.Heading),
      "data-variant": variant,
      ...props,
      // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
      ref: innerRef
    });
  }
  return /*#__PURE__*/jsx(Component, {
    className: clsx(className, classes.Heading),
    "data-variant": variant,
    ...props,
    ref: innerRef
  });
});
Heading.displayName = 'Heading';

export { Heading as default };