Skeleton

The RhSkeleton is a component that renders a RhSkeletonRectangle, RhSkeletonCircle and RhSkeletonLine placeholder element commonly used to indicate loading or data being fetched. It accepts several props to customize its shape further.

Usage

Once installed, you can import the RhSkeleton component into your React application:

copy

import {RhSkeleton,RhSkeletonRectangle,RhSkeletonLine ,RhSkeletonCircle } from "@rhythm-ui/react"

Then, you can use the RhSkeleton component in your JSX code:

copy

<RhSkeleton>
  <RhSkeletonRectangle />
</RhSkeleton>

Skeleton Circle props

Name	Type	Default	Description
size	string	50px	This prop could be used to specify the diameter of the circle in pixels or other CSS units
shade	"light" \| "dark"	light	The shade of the circle, which could affect its color or opacity.
borderRadius	string	100%	The border radius of the circle, which could be used to create a more or less rounded appearance.
icon	React.ReactNode		This prop could be used to specify an icon or image to be displayed in the center of the circle. This might be useful for displaying a logo or symbol that indicates the purpose of the loading animation.
className	string		This CSS class is to be applied to the component, which could be used to customize its appearance or behavior further.

Skeleton line props

Name	Type	Default	Description
lineCount	number		This prop could be used to specify the number of lines to be displayed in the animation.
alternateShade	boolean	false	This prop could be used to specify the shade of the lines, alternating between a light and dark shade.
borderRadius	string	50px	The border radius of the lines, which could be used to create a more or less rounded appearance.
alternateLength	boolean	false	The length of the alternate lines in the animation, which could be used to create a more or less pronounced effect.
className	string		ClassName to give custom classes

Skeleton Rectangle line props

Name	Type	Default	Description
height	string	10px	This prop could be used to specify the height of the rectangle in pixels or other CSS units.
width	string	200px	This prop could be used to specify the width of the rectangle in pixels or other CSS units.
shade	"light" \| "dark"	light	The shade of the rectangle, could affect its color or opacity. This might be useful for creating a lighter or darker version of the rectangle to match different backgrounds or themes.
borderRadius	string	50px	The border radius of the rectangle, which could be used to create a more or less rounded appearance.
icon	React.ReactNode		This prop could be used to specify an icon or image to be displayed in the center of the rectangle
className	string		ClassName to give custom classes

Circle

The RhSkeletonCircle component would provide a flexible and customizable way to display a circle loading or placeholder animation within a React application, with the ability to control its size, shade, border radius, icon, and CSS classes.

copy

<RhSkeleton>
  <RhSkeletonCircle size="80px" />
</RhSkeleton>

Multiple Bar

The lineCount prop in the RhSkeletonLine is used to display multiple lines in the animation. this feature is useful for indicating the progress of a loading process or displaying a placeholder for a list of items.

copy

<RhSkeleton>
  <RhSkeletonLine lineCount={10} />
</RhSkeleton>

Alternate Length Bar

The alternateLength prop in RhSkeletonLine is used to display alternate lines in the animation, which could be used to create a more or less pronounced effect.

copy

<RhSkeleton>
  <RhSkeletonLine lineCount={7} alternateLength />
</RhSkeleton>

Alternate Shade Bar

The alternateShade prop in RhSkeletonLine is used for alternating between a light and dark shade. This feature is useful for creating a more interesting or dynamic animation.

copy

<RhSkeleton>
  <RhSkeletonLine lineCount={7} alternateLength alternateShade />
</RhSkeleton>

Paragraph With Heading

The RhSkeletonRectangle component would provide a flexible and customizable way to display Paragraph with heading

copy

<RhSkeleton>
  <div>
    <RhSkeletonRectangle
      height="17px"
      width="50%"
      className="mb-3"
      shade="dark"
    />
    <RhSkeletonLine lineCount={7} />
  </div>
</RhSkeleton>

Image With Paragraph

The RhSkeletonRectangle component would provide a flexible and customizable way to display image with paragraph

copy

<div className="mx-[20%] flex gap-8 items-center">
  <div>
    <RhSkeleton>
      <RhSkeletonRectangle
        height="200px"
        width="200px"
        borderRadius="7px"
        icon={
          <RhIcon
            icon="heroicons:photo-solid"
            className="text-white text-4xl"
          />
        }
      />
    </RhSkeleton>
  </div>
  <div className="w-full">
    <RhSkeleton>
      <RhSkeletonRectangle height="17px" width="50%" className="mb-3" />
      <RhSkeletonLine lineCount={7} />
    </RhSkeleton>
  </div>
</div>

Image

The icon prop could be used to specify an icon or image to be displayed in the center of the rectangle. This feature is useful for displaying a logo or symbol that indicates the purpose of the loading animation.

copy

<RhSkeleton>
  <RhSkeletonRectangle
    height="300px"
    width="100%"
    borderRadius="10px"
    icon={
      <RhIcon icon="heroicons:photo-solid" className="text-white text-6xl" />
    }
  />
</RhSkeleton>

Video

This prop could be used to specify an image to be displayed as a placeholder for the video until it begins playing.

copy

<RhSkeleton>
  <RhSkeletonRectangle
    height="300px"
    width="100%"
    borderRadius="10px"
    icon={
      <RhIcon icon="heroicons:play-solid" className="text-white text-6xl" />
    }
  />
</RhSkeleton>

List placeholder

List placeholder provides a way to display a rectangular placeholder or loading animation for a list component within a React application.

copy

<RhListContainer className="w-80 m-auto border p-4 dark:border-transparent">
  <RhListItem>
    <RhListItemText
      primary={
        <RhSkeleton>
          <RhSkeletonRectangle
            height="7px"
            width="30%"
            shade="dark"
            className="mb-2"
          />
        </RhSkeleton>
      }
      secondary={
        <RhSkeleton>
          <RhSkeletonRectangle height="4px" width="20%" />
        </RhSkeleton>
      }
    />
    <RhListItem.Icon variant="secondary">
      <RhSkeleton>
        <RhSkeletonRectangle height="15px" width="15px" borderRadius="3px" />
      </RhSkeleton>
    </RhListItem.Icon>
  </RhListItem>

  <RhDivider />

  <RhListItem>
    <RhListItemText
      primary={
        <RhSkeleton>
          <RhSkeletonRectangle
            height="7px"
            width="30%"
            shade="dark"
            className="mb-2"
          />
        </RhSkeleton>
      }
      secondary={
        <RhSkeleton>
          <RhSkeletonRectangle height="4px" width="20%" />
        </RhSkeleton>
      }
    />
    <RhListItem.Icon variant="secondary">
      <RhSkeleton>
        <RhSkeletonRectangle height="15px" width="15px" borderRadius="3px" />
      </RhSkeleton>
    </RhListItem.Icon>
  </RhListItem>

  <RhDivider />

  <RhListItem>
    <RhListItemText
      primary={
        <RhSkeleton>
          <RhSkeletonRectangle
            height="7px"
            width="30%"
            shade="dark"
            className="mb-2"
          />
        </RhSkeleton>
      }
      secondary={
        <RhSkeleton>
          <RhSkeletonRectangle height="4px" width="20%" />
        </RhSkeleton>
      }
    />
    <RhListItem.Icon variant="secondary">
      <RhSkeleton>
        <RhSkeletonRectangle height="15px" width="15px" borderRadius="3px" />
      </RhSkeleton>
    </RhListItem.Icon>
  </RhListItem>

  <RhDivider />

  <RhListItem>
    <RhListItemText
      primary={
        <RhSkeleton>
          <RhSkeletonRectangle
            height="7px"
            width="30%"
            shade="dark"
            className="mb-2"
          />
        </RhSkeleton>
      }
      secondary={
        <RhSkeleton>
          <RhSkeletonRectangle height="4px" width="20%" />
        </RhSkeleton>
      }
    />
    <RhListItem.Icon variant="secondary">
      <RhSkeleton>
        <RhSkeletonRectangle height="15px" width="15px" borderRadius="3px" />
      </RhSkeleton>
    </RhListItem.Icon>
  </RhListItem>
</RhListContainer>

Profile

The RhSkeletonCircle custom component could be used to create a customizable profile placeholder or loading animation that can be tailored to the specific needs of a React application.

copy

<div className="flex w-full px-[30%] items-center gap-8">
  <div>
    <RhSkeleton>
      <RhSkeletonCircle
        size="100px"
        icon={
          <RhIcon
            icon="heroicons:user-circle-solid"
            className="text-white text-4xl"
          />
        }
      />
    </RhSkeleton>
  </div>
  <div className="w-full">
    <RhSkeleton>
      <RhSkeletonLine lineCount={2} alternateLength />
    </RhSkeleton>
  </div>
</div>