react#HTMLAttributes TypeScript Examples

The following examples show how to use react#HTMLAttributes. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ClickableText.spec.tsx    From apps with GNU Affero General Public License v3.0 7 votes vote down vote up 
renderComponent = <
  C extends HTMLElement = HTMLButtonElement,
  P = HTMLAttributes<C>,
>({
  children,
  ...props
}: Partial<
  BaseClickableTextProps & P & { children: ReactNode }
>): RenderResult => {
  return render(<ClickableText {...props}>{children}</ClickableText>);
}
Example #2
Source File: react-utils.ts    From utopia with MIT License 7 votes vote down vote up 
// 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>
Example #3
Source File: index.tsx    From glide-frontend with GNU General Public License v3.0 6 votes vote down vote up 
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>
  )
}
Example #4
Source File: common.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
CommentBox = ({
  children,
  ...props
}: {
  children?: ReactNode;
  props?: HTMLAttributes<HTMLDivElement>;
}): ReactElement => {
  return <StyledCommentBox {...props}>{children}</StyledCommentBox>;
}
Example #5
Source File: TagItemRow.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
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>
  );
}
Example #6
Source File: common.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
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,
      )}
    />
  );
}
Example #7
Source File: BetaBadge.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
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>
  );
}
Example #8
Source File: LazyLoading.tsx    From yugong with MIT License 6 votes vote down vote up 
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>
  );
}
Example #9
Source File: Sidebar.tsx    From opensaas with MIT License 6 votes vote down vote up 
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>
  );
}
Example #10
Source File: data-table-pagination.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
DataTablePagination = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "pagination", extra: className })}
  />
)
Example #11
Source File: FullHeight.tsx    From lightning-terminal with MIT License 6 votes vote down vote up 
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} />;
}
Example #12
Source File: index.tsx    From admin with MIT License 6 votes vote down vote up 
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>
  )
}
Example #13
Source File: index.tsx    From admin with MIT License 6 votes vote down vote up 
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>
  )
}
Example #14
Source File: AwaitApis.tsx    From contracts-ui with GNU General Public License v3.0 6 votes vote down vote up 
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}
    </>
  );
}
Example #15
Source File: useFocus.ts    From use-platform with MIT License 6 votes vote down vote up 
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,
  }
}
Example #16
Source File: useHover.ts    From use-platform with MIT License 6 votes vote down vote up 
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,
  }
}
Example #17
Source File: index.tsx    From vvs-ui with GNU General Public License v3.0 6 votes vote down vote up 
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>
  )
}
Example #18
Source File: data-table-pagination.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
DataTablePaginationNavigation = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({
      element: "pagination-navigation",
      extra: className,
    })}
  />
)
Example #19
Source File: buttonA11yProps.ts    From react-circular-menu with Apache License 2.0 6 votes vote down vote up 
buttonA11yProps = (
  onClick: () => void
): HTMLAttributes<HTMLDivElement> => ({
  role: "button",
  tabIndex: 0,
  onKeyPress: (keyboardEvent) => {
    if (["Enter", " ", "SpaceBar"].includes(keyboardEvent.key)) {
      keyboardEvent.preventDefault();
      onClick();
    }
  },
})
Example #20
Source File: data-table-pagination.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
DataTablePaginationTrailing = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "pagination-trailing", extra: className })}
  />
)
Example #21
Source File: data-table-pagination.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
DataTablePaginationRowsPerPage = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({
      element: "pagination-rows-per-page",
      extra: className,
    })}
  />
)
Example #22
Source File: data-table-pagination.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
DataTablePaginationRowsPerPageLabel = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({
      element: "pagination-rows-per-page-label",
      extra: className,
    })}
  />
)
Example #23
Source File: data-table-pagination.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
DataTablePaginationTotal = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "pagination-total", extra: className })}
  />
)
Example #24
Source File: full-screen-dialog.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
FullScreenDialogAppBar = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <>
    <TopAppBar
      {...props}
      className={bemClasses({ element: "app-bar", extra: className })}
    />
    <TopAppBarFixedAdjust />
  </>
)
Example #25
Source File: full-screen-dialog.tsx    From keycaplendar with MIT License 6 votes vote down vote up 
FullScreenDialogContent = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={bemClasses({ element: "content", extra: className })}
  />
)
Example #26
Source File: GradientText.tsx    From frontend.ro with MIT License 6 votes vote down vote up 
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>
  )
}
Example #27
Source File: widget.tsx    From memory-note with MIT License 6 votes vote down vote up 
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>
    );
}
Example #28
Source File: index.tsx    From project-loved-web with MIT License 6 votes vote down vote up 
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>
  );
}
Example #29
Source File: ElementPlaceholder.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
ElementPlaceholder = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>): ReactElement => (
  <div
    className={classNames(className, 'relative overflow-hidden bg-theme-float')}
    {...props}
  />
)