react#HTMLAttributes TypeScript Examples

renderComponent = <
  C extends HTMLElement = HTMLButtonElement,
  P = HTMLAttributes<C>,
>({
  children,
  ...props
}: Partial<
  BaseClickableTextProps & P & { children: ReactNode }
>): RenderResult => {
  return render(<ClickableText {...props}>{children}</ClickableText>);
}

// Utility function to interact with react. Provides the following advantages:
  // - forces the use of a key
  // - by having key and children as separate properties, the attrs param has the correct shape for the component model
  // - it's shorter than createElement :p

  // DOM Elements
  static create<P extends HTMLAttributes<T>, T extends HTMLElement>(
    type: keyof ReactHTML,
    props?: { key: Key } & ClassAttributes<T> & P,
    ...children: ReactNode[]
  ): DetailedReactHTMLElement<P, T>

SaveIcon: React.FC<{ fill: boolean } & HTMLAttributes<HTMLDivElement>> = ({ fill = false, ...rest }) => {
  const { theme } = useTheme()
  return (
    <HoverIcon {...rest}>
      {fill ? (
        <StarFillIcon stroke={theme.colors.warning} color={theme.colors.warning} />
      ) : (
        <StarLineIcon stroke={theme.colors.textDisabled} />
      )}
    </HoverIcon>
  )
}

CommentBox = ({
  children,
  ...props
}: {
  children?: ReactNode;
  props?: HTMLAttributes<HTMLDivElement>;
}): ReactElement => {
  return <StyledCommentBox {...props}>{children}</StyledCommentBox>;
}

export default function TagItemRow({
  tooltip,
  tag,
  rowIcon,
  followedTags,
  blockedTags,
  onFollowTags,
  onUnfollowTags,
  onUnblockTags,
  onClick,
}: TagItemRowProps &
  Omit<HTMLAttributes<HTMLAnchorElement>, 'onClick'>): ReactElement {
  return (
    <FilterItem className="relative pl-6 my-2">
      <TagButton
        className={!onFollowTags ? 'cursor-default' : ''}
        buttonSize="small"
        followedTags={followedTags}
        blockedTags={blockedTags}
        tagItem={tag}
        onFollowTags={onFollowTags}
        onUnfollowTags={onUnfollowTags}
        onUnblockTags={onUnblockTags}
      />
      <SimpleTooltip placement="left" content={tooltip}>
        <Button
          className="right-4 my-auto btn-tertiary"
          style={{ position: 'absolute' }}
          onClick={(event) => onClick?.(event, tag)}
          icon={rowIcon}
        />
      </SimpleTooltip>
    </FilterItem>
  );
}

export function CommentContent({
  className,
  ...props
}: HTMLAttributes<HTMLParagraphElement>): ReactElement {
  return (
    <p
      {...props}
      className={classNames(
        className,
        'p-0 m-0 theme-label-primary multi-truncate break-words whitespace-pre-wrap typo-callout tablet:flex-1 tablet:mr-6',
        styles.commentContent,
      )}
    />
  );
}

export default function BetaBadge({
  className,
}: HTMLAttributes<SVGElement>): ReactElement {
  return (
    <svg
      viewBox="0 0 30 12"
      className={className}
      xmlns="http://www.w3.org/2000/svg"
    >
      <g fill="none" fillRule="evenodd">
        <rect fill="#fff" height="12" opacity=".56" rx="2" width="30" />
        <path
          d="m6.25217391 9.5c.91460424 0 1.57480491-.15139353 1.98060201-.4541806s.60869565-.79130435.60869565-1.46555184c0-.54938685-.13500557-.97703456-.40501672-1.28294315-.27001115-.30590858-.67190636-.48539576-1.20568562-.53846153.44637681-.04057971.78506132-.18729097 1.01605351-.44013378.2309922-.25284281.3464883-.60401338.3464883-1.05351171 0-.58684504-.19587514-1.0277592-.58762542-1.32274247-.39175028-.29498328-.97625418-.44247492-1.75351171-.44247492h-2.25217391v7zm0-4.27491639h-.91772575v-1.62474916h.91772575c.34336678 0 .59074694.06477146.74214047.19431438.15139354.12954292.2270903.33790412.2270903.62508361s-.07413601.49319956-.22240802.6180602c-.14827202.12486065-.39721294.18729097-.74682275.18729097zm0 3.16989967h-.91772575v-2.06956522h.91772575c.4245262 0 .72887403.08272018.91304348.24816054.18416946.16544035.27625418.43701226.27625418.81471571 0 .37146043-.08818283.63210703-.26454849.7819398-.17636567.14983278-.48461539.22474917-.92474917.22474917zm8.07692309 1.10501672v-1.2173913h-2.9732442v-1.83076924h2.6923077v-1.2173913h-2.6923077v-1.50769231h2.9732442v-1.2173913h-4.35451506v6.99063545zm4.2093645 0v-5.7826087h1.774582v-1.20802675h-4.9304348v1.20802675h1.7745819v5.7826087zm3.7317726 0 .4214047-1.7277592h1.8494983l.4307693 1.7277592h1.3812709l-1.8869566-6.99063545h-1.690301l-1.8869565 6.99063545zm2.0040134-2.86555184h-1.3063545l.6508361-2.86086956z"
          fill="#151618"
          fillRule="nonzero"
        />
      </g>
    </svg>
  );
}

LazyLoading: React.FC<Props & HTMLAttributes<HTMLSpanElement>> = ({
  className,
  ...other
}) => {
  return (
    <span className={classNames(s.root, className)} {...other}>
      <svg
        version="1.1"
        id="L9"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 100 100"
        enableBackground="new 0 0 0 0"
      >
        <path
          fill="currentColor"
          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
        >
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="rotate"
            dur="1s"
            from="0 50 50"
            to="360 50 50"
            repeatCount="indefinite"
          />
        </path>
      </svg>
    </span>
  );
}

Sidebar: FC<HTMLAttributes<HTMLElement>> = ({ className }) => {
  return (
    <div className={classNames('sidebar', className)}>
      <div className='logo'>
        <a className='d-flex flex-row align-items-center justify-content-start space-x-2' href='/'>
          <Image src='/images/logo.png' />
        </a>
      </div>
      <div className='links-container'>{Menu}</div>
      <label htmlFor='collapsing' className='ml-4 mr-4 text-right cursor-pointer'>
        <Icon type='hamburger' />
      </label>
    </div>
  );
}

DataTablePagination = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "pagination", extra: className })}
  />
)

export default function FullHeight({
  style = {},
  ...other
}: HTMLAttributes<HTMLDivElement>): JSX.Element {
  const height = use100vh();

  // TODO: warn only in development
  if (!warned && style.height) {
    warned = true;
    console.warn('<ReactDiv100vh /> overrides the height property of the style prop');
  }
  const styleWithRealHeight = {
    ...style,
    height: height ? `${height}px` : '100vh',
  };
  return <div style={styleWithRealHeight} {...other} />;
}

DiscardButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
  children,
  className,
  ...props
}) => {
  return (
    <button
      className={clsx(
        "flex items-center justify-center text-white inter-small-semibold h-full w-full",
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
}

ActionButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
  children,
  className,
  ...props
}) => {
  return (
    <button
      className={clsx(
        "flex items-center justify-center text-white inter-small-semibold h-full w-full",
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
}

export function AwaitApis({ children }: HTMLAttributes<HTMLDivElement>): React.ReactElement {
  const { error, status, keyringStatus, endpoint } = useApi();
  const { isDbReady } = useDatabase();
  const [message, setMessage] = useState('');

  const isLoading = !isDbReady || keyringStatus !== 'READY' || status !== 'READY';

  useEffect(() => {
    !isDbReady && setMessage('Loading data...');
    keyringStatus !== 'READY' && setMessage('Loading accounts...');
    status !== 'READY' && setMessage(`Connecting to ${endpoint}...`);
  }, [isDbReady, keyringStatus, status, endpoint]);

  return (
    <>
      {error ? <ConnectionError /> : isLoading ? <Loader message={message} isLoading /> : children}
    </>
  );
}

export function useFocus<T extends HTMLElement>(props: UseFocusProps<T>): UseFocusResult<T> {
  const propsRef = useRef(props)
  propsRef.current = props

  const onFocus = useCallback((event: FocusEvent<T>) => {
    const { onFocus, onFocusChange } = propsRef.current

    if (event.target === event.currentTarget) {
      onFocus?.(event)
      onFocusChange?.(true)
    }
  }, [])

  const onBlur = useCallback((event: FocusEvent<T>) => {
    const { onBlur, onFocusChange } = propsRef.current

    if (event.target === event.currentTarget) {
      onBlur?.(event)
      onFocusChange?.(false)
    }
  }, [])

  const focusProps: HTMLAttributes<T> = {}

  if (!props.disabled) {
    if (props.onFocus || props.onFocusChange) {
      focusProps.onFocus = onFocus
    }

    if (props.onBlur || props.onFocusChange) {
      focusProps.onBlur = onBlur
    }
  }

  return {
    focusProps,
  }
}

export function useHover(props: UseHoverProps): UseHoverResult {
  const [isHovered, setHovered] = useState(false)
  const propsRef = useRef<UseHoverProps>({})
  // Use ref as cache for reuse props inside memo hook.
  propsRef.current = { disabled: props.disabled }

  const hoverProps = useMemo(() => {
    const props: HTMLAttributes<HTMLElement> = {}

    props.onPointerEnter = () => {
      const { disabled } = propsRef.current

      if (disabled) {
        return
      }

      setHovered(true)
    }

    props.onPointerLeave = () => {
      setHovered(false)
    }

    return props
  }, [])

  return {
    isHovered,
    hoverProps,
  }
}

SaveIcon: React.FC<{ fill: boolean } & HTMLAttributes<HTMLDivElement>> = ({ fill = false, ...rest }) => {
  const { theme } = useTheme()
  return (
    <HoverIcon {...rest}>
      {fill ? (
        <StarFillIcon stroke={theme.colors.warning} color={theme.colors.warning} />
      ) : (
        <StarLineIcon stroke={theme.colors.textDisabled} />
      )}
    </HoverIcon>
  )
}

DataTablePaginationNavigation = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({
      element: "pagination-navigation",
      extra: className,
    })}
  />
)

buttonA11yProps = (
  onClick: () => void
): HTMLAttributes<HTMLDivElement> => ({
  role: "button",
  tabIndex: 0,
  onKeyPress: (keyboardEvent) => {
    if (["Enter", " ", "SpaceBar"].includes(keyboardEvent.key)) {
      keyboardEvent.preventDefault();
      onClick();
    }
  },
})

DataTablePaginationTrailing = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "pagination-trailing", extra: className })}
  />
)

DataTablePaginationRowsPerPage = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({
      element: "pagination-rows-per-page",
      extra: className,
    })}
  />
)

DataTablePaginationRowsPerPageLabel = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({
      element: "pagination-rows-per-page-label",
      extra: className,
    })}
  />
)

DataTablePaginationTotal = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "pagination-total", extra: className })}
  />
)

FullScreenDialogAppBar = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <>
    <TopAppBar
      {...props}
      className={bemClasses({ element: "app-bar", extra: className })}
    />
    <TopAppBarFixedAdjust />
  </>
)

FullScreenDialogContent = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "content", extra: className })}
  />
)

GradientText : <T extends HTMLAttributes<any>>(args: PropsWithChildren<Props> & T) => JSX.Element = ({ 
  fromColor,
  toColor,
  children,
  angle = 90,
  style = {},
  className = "",
  as: Wrapper = 'p',
  ...rest
}) => {
  return (
    <Wrapper {...rest} className={`${className} ${styles.GradientText}`} style={{
      ...style,
      backgroundImage: `linear-gradient(
        ${angle}deg,
        ${fromColor}, ${toColor}
      )`
    }}>
      {children}
    </Wrapper>
  )
}

List: FC<HTMLAttributes<HTMLUListElement>> = ({ children, ...props }) => {
    return (
        <ul
            style={{
                listStyle: "none",
                whiteSpace: "nowrap",
                textOverflow: "ellipsis",
                overflow: "hidden",
                fontSize: "1rem",
                padding: "0.5rem 1rem"
            }}
            {...props}
        >
            {children}
        </ul>
    );
}

export default function Dropdown({
  align,
  children,
  ...props
}: PropsWithChildren<DropdownProps> & HTMLAttributes<HTMLDivElement>) {
  const [open, setOpen] = useState(false);

  return (
    <div
      {...props}
      className='dropdown-container'
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      {open ? '▲' : '▼'}
      <div className={`dropdown ${align} ${open ? 'open' : ''}`}>{children}</div>
    </div>
  );
}

ElementPlaceholder = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>): ReactElement => (
  <div
    className={classNames(className, 'relative overflow-hidden bg-theme-float')}
    {...props}
  />
)