1readme.md

ReactJS Component

• Heading Tag(dynamic)
• Img Tag

forward_ref_headingTag.md

Heading Tag

import React from 'react'

type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  text: string
  className?: string
}

export default React.forwardRef<HTMLHeadingElement, HeadingProps>(
  ({ className, as, text, ...props }, ref) => {
    const Tag = as

    return React.createElement(Tag, { className, ref, ...props }, text)
  }
)

forward_ref_img.md

Example of using forward ref to img element

What we trying to achieve here is that when we use the logo component we stil get the classes of tailwind if we dont do the forwardRef the component does not know or do not do the auto suggest classes

/logo.tsx

type ImgProps = React.ImgHTMLAttributes<HTMLImageElement> & {
  imgSrc: string
}

export default React.forwardRef<HTMLImageElement, ImgProps>(
  ({ className, imgSrc, ...props }, ref) => {
    return <img src={imgSrc} className={className} ref={ref} {...props} />
  }
)