react#HTMLProps TypeScript Examples

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      if (!(target === '_blank' || event.ctrlKey || event.metaKey)) {
        event.preventDefault()
      }
    },
    [target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === '_blank' || event.ctrlKey || event.metaKey) {
        ReactGA.outboundLink({ label: href }, () => {
          console.debug('Fired outbound link event', href)
        })
      } else {
        event.preventDefault()
        // send a ReactGA event and then trigger a location change
        ReactGA.outboundLink({ label: href }, () => {
          window.location.href = href
        })
      }
    },
    [href, target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

export function ExternalLinkIcon({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === '_blank' || event.ctrlKey || event.metaKey) {
        ReactGA.outboundLink({ label: href }, () => {
          console.debug('Fired outbound link event', href)
        })
      } else {
        event.preventDefault()
        // send a ReactGA event and then trigger a location change
        ReactGA.outboundLink({ label: href }, () => {
          window.location.href = href
        })
      }
    },
    [href, target]
  )
  return (
    <LinkIconWrapper target={target} rel={rel} href={href} onClick={handleClick} {...rest}>
      <LinkIcon />
    </LinkIconWrapper>
  )
}

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === '_blank' || event.ctrlKey || event.metaKey) {
        ReactGA.outboundLink({ label: href }, () => {
          console.debug('Fired outbound link event', href)
        })
      } else {
        event.preventDefault()
        // send a ReactGA event and then trigger a location change
        ReactGA.outboundLink({ label: href }, () => {
          window.location.href = href
        })
      }
    },
    [href, target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

RoundedExternalLink = forwardRef<
  HTMLAnchorElement,
  { icon: IconType } & HTMLProps<HTMLAnchorElement>
>(({ href, className, icon: Icon, children }, ref) => (
  <a
    href={href}
    ref={ref}
    target="_blank"
    rel="noreferrer noopener"
    className={[className ?? '', roundedLinkClassName].join(' ')}
  >
    <span className="text-lg" style={{ transform: 'translateY(-1px)' }}>
      <Icon />
    </span>
    <span className="ml-4 font-bold">{children}</span>
  </a>
))

SocialLink = forwardRef<
  HTMLAnchorElement,
  { link: [string, string] } & HTMLProps<HTMLAnchorElement>
>(({ link: [type, url], ...anchorProps }, ref) => {
  const Icon = iconMapping[type];
  return (
    <a href={url} ref={ref} {...anchorProps}>
      <Icon />
    </a>
  );
})

GradeInput: FC<CalculatorInputProps> = ({ inputId, ...props }) => {
  const { watch, setValue: setValueOriginal, setError } = useFormContext();
  const value = watch(inputId);
  const setValue = (updatedValue: number | null) => setValueOriginal(inputId, updatedValue);

  const handleKeyDown = (e: KeyboardEvent) => {
    if (['Backspace', 'Delete'].includes(e.key)) {
      e.preventDefault();
      setValue(null);
    }
  };

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const len = e.target.value.length;
    const updatedValue = len > 0 ? e.target.value[len - 1] : '';

    const parsedValue = parseInt(updatedValue, 10);
    if (isGradeValid(parsedValue)) setValue(parsedValue);
    else {
      setValue(null);
      setError(inputId, { message: 'Invalid value' });
    }
  };

  const inputProps: Partial<HTMLProps<HTMLInputElement>> = {
    ...props,
    placeholder: '5',
    'aria-label': 'Ocena',
    inputMode: 'numeric',
    value: value ?? '',
    onKeyDown: handleKeyDown,
    onChange: handleChange,
    autoComplete: 'off',
  };

  return <input {...inputProps} data-testid="input" />;
}

CloseIcon: React.FC<HTMLProps<HTMLDivElement>> = (props) => (
  <div {...props}>
    <svg
      width="12"
      height="13"
      viewBox="0 0 12 13"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6.705 6.5l2.15-2.145a.502.502 0 10-.71-.71L6 5.795l-2.145-2.15a.502.502 0 00-.71.71L5.295 6.5l-2.15 2.145a.5.5 0 00.163.82.5.5 0 00.547-.11L6 7.205l2.145 2.15a.5.5 0 00.82-.163.5.5 0 00-.11-.547L6.705 6.5z"
        fill="#627BFF"
      />
    </svg>
  </div>
)

function Input(props: InputProps & HTMLProps<HTMLInputElement>): JSX.Element {
    const { type = 'text', label, id, onChange, defaultValue, placeholder, reference, className, errorMessage } = props;
    return (
        <div className={`input-wrapper ${type} ${className}`}>
            {label && (
                <label htmlFor={id} className="label">
                    {label}
                </label>
            )}

            <div>
                <input
                    onChange={onChange}
                    defaultValue={defaultValue}
                    name={id}
                    id={id}
                    type={type}
                    placeholder={placeholder}
                    ref={reference}
                />
            </div>
            {errorMessage && <p className="error-message red">{errorMessage}</p>}
        </div>
    );
}

export function LayoutResults({ children }: PropsWithChildren<HTMLProps<HTMLDivElement>>) {
  return (
    <LayoutContainer>
      <Header>
        <NavigationBar />
      </Header>

      <MainContent>{children}</MainContent>

      <Footer>
        <FooterContent />
      </Footer>
    </LayoutContainer>
  )
}

export function LayoutMain({ children }: PropsWithChildren<HTMLProps<HTMLDivElement>>) {
  const { t } = useTranslation()
  const router = useRouter()
  const goToResults = useCallback(() => router.push('/results'), [router])
  const hasRan = useRecoilValue(hasRanAtom)

  return (
    <Container>
      <Header>
        <NavigationBar />
      </Header>

      <ButtonToResults hidden={!hasRan} color="secondary" onClick={goToResults}>
        {t('To Results')}
        <FaCaretRight />
      </ButtonToResults>

      <MainContent>{children}</MainContent>

      <Footer>
        <FooterContent />
      </Footer>
    </Container>
  )
}

AppBarIndent = <Tag extends React.ElementType<any> = "div">(
  props: RMWC.ComponentProps<TopAppBarSectionProps, HTMLProps<HTMLElement>, Tag>
) => (
  <TopAppBarSection alignEnd className="indent" {...props}>
    <svg
      height="56"
      viewBox="0 0 128 56"
      width="128"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M107.3,0a8.042,8.042,0,0,0-7.9,6.6A36.067,36.067,0,0,1,64,36,36.067,36.067,0,0,1,28.6,6.6,8.042,8.042,0,0,0,20.7,0H0V56H128V0Z"
        fill="inherit"
      />
    </svg>
    <div className="fill"></div>
  </TopAppBarSection>
)

childrenToString = (
  children: HTMLProps<HTMLElement>['children'],
): string => {
  let label = ''

  React.Children.map(children, child => {
    if (typeof child === 'string') {
      label += child
    }
  })

  return label
}

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      if (!(target === '_blank' || event.ctrlKey || event.metaKey)) {
        event.preventDefault()
      }
    },
    [target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

export function ExternalLinkIcon({
  target = "_blank",
  href,
  rel = "noopener noreferrer",
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, "as" | "ref" | "onClick"> & {
  href: string;
}) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === "_blank" || event.ctrlKey || event.metaKey) {
      } else {
        event.preventDefault();
      }
    },
    [target]
  );
  return (
    <LinkIconWrapper
      target={target}
      rel={rel}
      href={href}
      onClick={handleClick}
      {...rest}
    >
      <LinkIcon />
    </LinkIconWrapper>
  );
}

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = "_blank",
  href,
  rel = "noopener noreferrer",
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, "as" | "ref" | "onClick"> & {
  href: string;
}) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === "_blank" || event.ctrlKey || event.metaKey) {
      } else {
        event.preventDefault();
      }
    },
    [target]
  );
  return (
    <StyledLink
      target={target}
      rel={rel}
      href={href}
      onClick={handleClick}
      {...rest}
    />
  );
}

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === '_blank' || event.ctrlKey || event.metaKey) {
        ReactGA.outboundLink({ label: href }, () => {
          console.debug('Fired outbound link event', href)
        })
      } else {
        event.preventDefault()
        // send a ReactGA event and then trigger a location change
        ReactGA.outboundLink({ label: href }, () => {
          window.location.href = href
        })
      }
    },
    [href, target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

export default function ProfileButton({
  className,
}: HTMLProps<HTMLButtonElement>): ReactElement {
  const { user } = useContext(AuthContext);
  const { onMenuClick } = useProfileMenu();

  return (
    <>
      <SimpleTooltip placement="left" content="Profile settings">
        <button
          type="button"
          className={classNames(
            'items-center p-0 ml-0.5 font-bold no-underline rounded-lg border-none cursor-pointer text-theme-label-primary bg-theme-bg-secondary typo-callout focus-outline',
            className ?? 'flex',
          )}
          onClick={onMenuClick}
        >
          <span className="hidden laptop:block mr-2 ml-3">
            {user.reputation ?? 0}
          </span>
          <ProfilePicture user={user} size="medium" />
        </button>
      </SimpleTooltip>
      <ProfileMenu />
    </>
  );
}

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === '_blank' || event.ctrlKey || event.metaKey) {
        ReactGA.outboundLink({ label: href }, () => {
          console.debug('Fired outbound link event', href)
        })
      } else {
        event.preventDefault()
        // send a ReactGA event and then trigger a location change
        ReactGA.outboundLink({ label: href }, () => {
          window.location.href = href
        })
      }
    },
    [href, target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === '_blank' || event.ctrlKey || event.metaKey) {
        ReactGA.outboundLink({ label: href }, () => {
          console.debug('Fired outbound link event', href)
        })
      } else {
        event.preventDefault()
        // send a ReactGA event and then trigger a location change
        ReactGA.outboundLink({ label: href }, () => {
          window.location.href = href
        })
      }
    },
    [href, target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

SubNavigationItem: React.FC<HTMLProps<HTMLAnchorElement>> = ({
  className,
  children,
  ...rest
}) => (
  <li className={classNames('nhsuk-sub-navigation__item', className)}>
    <a className="nhsuk-sub-navigation__link" {...rest}>
      {children}
    </a>
  </li>
)

/**
 * Outbound link that handles firing google analytics events
 */
export function ExternalLink({
  target = '_blank',
  href,
  rel = 'noopener noreferrer',
  ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      // don't prevent default, don't redirect if it's a new tab
      if (target === '_blank' || event.ctrlKey || event.metaKey) {
        ReactGA.outboundLink({ label: href }, () => {
          console.debug('Fired outbound link event', href)
        })
      } else {
        event.preventDefault()
        // send a ReactGA event and then trigger a location change
        ReactGA.outboundLink({ label: href }, () => {
          window.location.href = href
        })
      }
    },
    [href, target]
  )
  return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
}

MdxRenderer = ({ body }: { body: string }) => {
  return (
    <MDXProvider
      components={{
        // Typography
        h1: props => (
          <Title gutterBottom variant="h2" component="h1" {...props} />
        ),
        h2: props => (
          <Title gutterBottom variant="h3" component="h2" {...props} />
        ),
        h3: props => (
          <Title gutterBottom variant="h4" component="h3" {...props} />
        ),
        h4: props => (
          <Title gutterBottom variant="h5" component="h4" {...props} />
        ),
        h5: props => (
          <Title gutterBottom variant="h6" component="h5" {...props} />
        ),
        h6: props => (
          <Title gutterBottom variant="h6" component="h6" {...props} />
        ),
        a: props => <Link {...props} underline="hover" />,
        p: props => <Typography gutterBottom variant="body1" {...props} />,
        blockquote: (props: TypographyProps) => (
          <Quote variant="body1" {...props} />
        ),

        // Code
        pre: props => <Fragment {...props} />,
        code: (props: HTMLProps<HTMLElement>) => {
          // Extract code language
          let lang = undefined
          if (
            props.hasOwnProperty('className') &&
            typeof props.className !== 'undefined'
          ) {
            const classes = props.className.split(' ')
            classes.forEach((element: string) => {
              if (element.includes('language')) {
                lang = element.split('-')[1]
              }
            })
          }
          return (
            <Code code={childrenToString(props.children)} language={lang} />
          )
        },
        inlineCode: props => (
          <InlineCode
            gutterBottom
            variant="body2"
            component="code"
            {...props}
          />
        ),

        // Lists
        li: props => <Typography variant="body1" component="li" {...props} />,

        // Tables
        table: props => (
          <TableContainer as={Paper}>
            <Table {...props} />
          </TableContainer>
        ),
        tr: props => <TableRow {...props} />,
        td: props => <TableCell {...props} align="left" />,
        th: props => <TableCell {...props} align="left" />,

        // Mixins
        hr: () => <Divider />,
        thematicBreak: () => <Divider />,
      }}
    >
      <MDXRenderer>{body}</MDXRenderer>
    </MDXProvider>
  )
}

export function TableRowSpacer(props: HTMLProps<HTMLTableRowElement>) {
  return (
    <tr {...props}>
      <TableColumnSpacer className="table-td-spacer" />
    </tr>
  )
}

SpinnerWrapper = styled.div<HTMLProps<HTMLDivElement>>`
  width: 100%;
  height: 100%;
  display: flex;
`

RibbonLinkBar: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
  <div className={classNames('nhsuk-ribbon-link__bar', className)} {...rest} />
)

Link: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, ...rest }) => (
  <div className="nhsuk-accordion-menu__subsection">
    <a className={classNames('nhsuk-accordion-menu__subsection-link', className)} {...rest} />
  </div>
)

QnaPostItem: React.FC<
  QnaPostItemProps & HTMLProps<HTMLDivElement>
> = ({ post, ...props }) => {
  return (
    <QnaPostBlock {...props}>
      <QnaPostWrapper>
        <AvatarIcon
          src="/profile.svg"
          alt={`@${post.username}`}
          css={css`
            margin-top: 4px;
          `}
          width={49}
          height={49}
        />
        <QnaPostContent>
          <WrapperLink to={`/qna/${post.id}`}>
            <div
              css={css`
                font-size: 21px;
                font-style: normal;
                font-weight: 400;
                line-height: 30px;
                letter-spacing: -0.02em;
                text-align: left;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;

                padding-bottom: 5px;
                color: #627bff;
                height: 30px;
              `}
            >
              {post.title}
            </div>
          </WrapperLink>
          <div
            css={css`
              font-style: normal;
              font-weight: normal;
              font-size: 14px;
              line-height: 20px;
              letter-spacing: -0.02em;
              color: #737373;
              text-align: left;
              text-overflow: ellipsis;
              word-break: break-word;
              overflow-wrap: break-word;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;

              height: 40px;
            `}
          >
            {post.text}
          </div>
          <div
            css={css`
              display: flex;
              justify-content: space-between;
            `}
          >
            <QnaTagList
              css={css`
                padding-top: 16px;
              `}
            >
              {post.tags?.map((tag) => (
                <div key={tag}>{tag}</div>
              ))}
            </QnaTagList>
            <div
              css={css`
                flex-shrink: 0;
                align-self: flex-end;
                font-style: normal;
                font-weight: normal;
                font-size: 12px;
                line-height: 17px;
                text-align: right;
                letter-spacing: -0.02em;

                color: #7c7c7c;
              `}
            >
              {formatDate(post.created_at)}
            </div>
          </div>
        </QnaPostContent>
      </QnaPostWrapper>
      <Divider />
    </QnaPostBlock>
  );
}