react#AllHTMLAttributes TypeScript Examples

The following examples show how to use react#AllHTMLAttributes. 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: mdx-components.tsx    From vanilla-extract with MIT License 6 votes vote down vote up 
A = ({
  href,
  size, // Omit
  color, // Omit
  type, // Omit
  ...restProps
}: AllHTMLAttributes<HTMLAnchorElement>) => {
  let isInlineCodeLink = false;

  if (
    restProps.children &&
    Children.count(restProps.children) === 1 &&
    typeof restProps.children === 'object'
  ) {
    const child = Children.only(restProps.children);
    if (child && typeof child === 'object' && 'props' in child) {
      isInlineCodeLink =
        child.props.parentName === 'a' &&
        child.props.originalType === 'inlineCode';
    }
  }

  return href ? (
    <Link
      to={href}
      {...restProps}
      inline
      underline="always"
      highlightOnFocus={!isInlineCodeLink}
      className={
        isInlineCodeLink
          ? sprinkles({ color: { lightMode: 'pink700', darkMode: 'gray200' } })
          : undefined
      }
    />
  ) : (
    <a {...restProps} />
  );
}
Example #2
Source File: mdx-components.tsx    From vanilla-extract with MIT License 5 votes vote down vote up 
Pre = ({ color, width, ...props }: AllHTMLAttributes<HTMLPreElement>) => (
  <Box component="pre" paddingBottom="large" {...props} />
)
Example #3
Source File: useButton.ts    From use-platform with MIT License 5 votes vote down vote up 
export function useButton<T extends HTMLElement = HTMLElement>(
  props: UseButtonProps<T>,
  ref: RefObject<T>,
): UseButtonResult<T> {
  const {
    as: elementType = 'button',
    disabled,
    href,
    target,
    rel,
    type = 'button',
    tabIndex,
    onPress: _onPress,
    onPressEnd: _onPressEnd,
    onPressStart: _onPressStart,
    onPressUp: _onPressUp,
    preventFocusOnPress: _preventFocusOnPress,
    ...restProps
  } = props

  let additionalProps: AllHTMLAttributes<T>

  if (elementType === 'button') {
    additionalProps = { type, disabled }

    if (isFirefox()) {
      // https://bugzilla.mozilla.org/show_bug.cgi?id=654072
      additionalProps.autoComplete = 'off'
    }
  } else {
    additionalProps = {
      role: 'button',
      tabIndex: disabled ? undefined : 0,
      href: elementType === 'a' && disabled ? undefined : href,
      target: elementType === 'a' ? target : undefined,
      type: elementType === 'input' ? type : undefined,
      disabled: elementType === 'input' ? disabled : undefined,
      'aria-disabled': !disabled || elementType === 'input' ? undefined : disabled,
      rel: elementType === 'a' ? rel : undefined,
    }
  }

  const { focusableProps } = useFocusable(props, ref)
  const { isPressed, pressProps } = usePress(props)

  return {
    buttonProps: mergeProps(restProps, additionalProps, focusableProps, pressProps),
    isPressed,
  }
}