react#AnchorHTMLAttributes TypeScript Examples

Button = ({
  children,
  className,
  link,
  ...props
}: ButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>) => {
  return (
    <a
      {...props}
      className={classNames(
        'px-20 py-2 rounded bg-gradient-to-r from-teal-500 to-blue-500 bg-200 bg-left hover:bg-right transition-all text-back-secondary duration-[0.5s] ease-out focus-visible:outline-accent focus:text-accent',
        className
      )}
      href={link}
      target="_blank"
      rel="noopener noreferrer"
    >
      {children}
    </a>
  )
}

CustomLink = ({
  href,
  ...rest
}: DetailedHTMLProps<
  AnchorHTMLAttributes<HTMLAnchorElement>,
  HTMLAnchorElement
>) => {
  const isInternalLink = href && href.startsWith('/');
  const isAnchorLink = href && href.startsWith('#');

  if (isInternalLink) {
    return (
      <Link href={href}>
        <a {...rest} />
      </Link>
    );
  }

  if (isAnchorLink) {
    return <a href={href} {...rest} />;
  }

  return <a target='_blank' rel='noopener noreferrer' href={href} {...rest} />;
}

AutoLink: React.FC<DetailedHTMLProps<
  AnchorHTMLAttributes<HTMLAnchorElement>,
  HTMLAnchorElement
>> = props =>
  props.href && props.href.startsWith('#') ? (
    // eslint-disable-next-line jsx-a11y/anchor-has-content
    <a {...props} className={css.link} />
  ) : (
    <ExternalLink {...props} />
  )

export function Property<T extends IContent>(props: React.PropsWithChildren<PropertyProps<T>>) : ReactElement<unknown> | null
{
    const ctx = useEpiserver();
    if (!hasProperty(props.iContent, props.field.toString())) {
        return ctx.isDebugActive() ? <div>Property <span>{ props.field }</span> not present</div> : null;
    }
    const prop = getProperty(props.iContent, props.field);
    const propType = isIContentProperty(prop) ? prop.propertyDataType : typeof(prop);
    let stringValue : string;
    switch (propType) {
        case 'string':
            return isEditable(props.iContent, ctx) ? <span className={props.className} data-epi-edit={ props.field }>{ prop }</span> : (props.className ? <span className={ props.className }>{ prop }</span> : <>{ prop }</>);
        case 'PropertyString':
        case 'PropertyLongString':
            stringValue = isIContentProperty(prop) ? (prop as IContentProperty<string>).value : '';
            return isEditable(props.iContent, ctx) ? <span className={props.className} data-epi-edit={ props.field }>{ stringValue }</span> : (props.className ? <span className={ props.className }>{ stringValue }</span> : <>{ stringValue}</>);
        case 'PropertyUrl': 
            {
                const propUrlValue = isIContentProperty(prop) ? (prop as IContentProperty<string>).value : '';
                const propUrlprops : AnchorHTMLAttributes<HTMLAnchorElement> & {"data-epi-edit"?: string} = {
                    className: props.className,
                    href: propUrlValue,
                    children: props.children || propUrlValue
                };
                if (isEditable(props.iContent, ctx)) {
                    propUrlprops['data-epi-edit'] = props.field as string;
                }
                return React.createElement('a', propUrlprops);
            }
        case 'PropertyDecimal':
        case 'PropertyNumber':
        case 'PropertyFloatNumber':
            {
                const propNumberValue : number = isIContentProperty(prop) ? (prop as IContentProperty<number>).value : 0;
                const className = `number ${props.className}`;
                return isEditable(props.iContent, ctx) ? <span className={ className } data-epi-edit={ props.field }>{ propNumberValue }</span> : <span className={ className }>{ propNumberValue }</span>;
            }
        case 'PropertyXhtmlString':
            stringValue = isIContentProperty(prop) ? (prop as IContentProperty<string>).value : '';
            return isEditable(props.iContent, ctx) ? <div className={props.className} data-epi-edit={ props.field } dangerouslySetInnerHTML={ {__html: stringValue} }></div> : <div suppressHydrationWarning={true} className={ props.className } dangerouslySetInnerHTML={ {__html: stringValue} } />;
        case 'PropertyContentReference':
        case 'PropertyPageReference':
            {
                let item : React.ReactElement | null = null;
                if (isIContentProperty(prop)) {
                    const link = (prop as ContentReferenceProperty).value;
                    const expValue = (prop as ContentReferenceProperty).expandedValue;
                    item = <EpiComponent contentLink={link} expandedValue={expValue} className={props.className} />
                }
                return isEditable(props.iContent, ctx) ? <div data-epi-edit={ props.field }>{ item }</div> : item;
            }
        case 'PropertyContentArea':
            if (isIContentProperty(prop)) return isEditable(props.iContent, ctx) ? 
                <ContentArea data={ prop as ContentAreaProperty} propertyName={ props.field as string } /> :
                <ContentArea data={ prop as ContentAreaProperty} />;
            return null;
    }
    return ctx.isDebugActive() ? <div className="alert alert-warning">Property type <span>{ propType }</span> not supported</div> : null;
}

ExternalLink: React.FC<DetailedHTMLProps<
  AnchorHTMLAttributes<HTMLAnchorElement>,
  HTMLAnchorElement
>> = props => (
  // eslint-disable-next-line jsx-a11y/anchor-has-content
  <a {...props} className={css.link} target='_blank' rel='noopener' />
)

ExternalLink: FC<AnchorHTMLAttributes<never>> = ({ children, className, href }) => (
  <Anchor className={className} href={href} target="_blank" rel="noopener noreferrer">
    <span>{children}</span>
    <ExternalLinkArrow />
  </Anchor>
)

MenuLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ href, ...otherProps }) => {
  const isHttpLink = href?.startsWith('http')

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const Tag: any = isHttpLink ? 'a' : NavLink
  const props = isHttpLink ? { href } : { to: href }
  return <Tag role="button" {...props} {...otherProps} />
}