package.src.components.Skeleton.Skeleton.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation

This library provides a set of common React components for use with the PatternFly reference implementation.

The newest version!

import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/Skeleton/skeleton';
import { css } from '@patternfly/react-styles';
import cssHeight from '@patternfly/react-tokens/dist/esm/c_skeleton_Height';
import cssWidth from '@patternfly/react-tokens/dist/esm/c_skeleton_Width';

export interface SkeletonProps extends React.HTMLProps {
  /** Additional classes added to the Skeleton */
  className?: string;
  /** The width of the Skeleton. Must specify pixels or percentage. */
  width?: string;
  /** The height of the Skeleton. Must specify pixels or percentage. */
  height?: string;
  /** The font size height of the Skeleton */
  fontSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
  /** The shape of the Skeleton */
  shape?: 'circle' | 'square';
  /** Text read just to screen reader users */
  screenreaderText?: string;
}

export const Skeleton: React.FunctionComponent = ({
  className,
  width,
  height,
  fontSize,
  shape,
  screenreaderText,
  ...props
}: SkeletonProps) => {
  const fontHeightClassName = fontSize
    ? Object.values(styles.modifiers).find((key) => key === `pf-m-text-${fontSize}`)
    : undefined;

  return (
    
      {screenreaderText}
    
  );
};
Skeleton.displayName = 'Skeleton';