DOCSEARCHbyAlgolia
Submit Docs

react-loading-skeleton

repository·master·Indexed 26 days ago

https://github.com/dvtng/react-loading-skeleton

A React library for creating animated loading skeletons that adapt to an application's styles and typography. Version 3.5.0 provides the Skeleton component for rendering single or multiple loading lines, and the SkeletonTheme component for applying consistent baseColor, highlightColor, and dimensions across a component hierarchy.

Tokens
2.2K
Snippets
6
Records
15
Agent score
85%

What's inside react-loading-skeleton

  3. Fix Skeleton width in Flex containers

    master

    If a Skeleton has 0 width inside a parent with display: flex, it is because the skeleton has no intrinsic width. Fix this by applying flex: 1 to the container using the containerClassName prop.

    <div style={{ display: 'flex' }}>
  <Skeleton containerClassName="flex-1" />
</div>

  4. Custom Highlight Background

    master

    To customize the gradient of the highlight animation, use the customHighlightBackground prop. Note that when using this prop, baseColor and highlightColor props are ignored, but you can still reference their CSS variables (var(--base-color) and var(--highlight-color)).

    <Skeleton customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)" />

  5. Basic Usage of Skeleton component

    master

    Import Skeleton and its required CSS to render loading states. You can render a single line or multiple lines using the count prop.

    import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

<Skeleton /> // Simple, single-line loading skeleton
<Skeleton count={5} /> // Five-line loading skeleton

  6. Theme skeletons with SkeletonTheme

    master

    Use the SkeletonTheme component to wrap a section of your application. This will apply the specified baseColor and highlightColor to all Skeleton components within that React hierarchy.

    import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

return (
  <SkeletonTheme baseColor="#202020" highlightColor="#444">
    <p>
      <Skeleton count={3} />
    </p>
  </SkeletonTheme>
);

  7. Skeleton Props Reference

    master

    The Skeleton component accepts several props to control its appearance and behavior.

    Skeleton-only props:

    • count (number, default: 1): The number of lines to render. Decimal values (e.g., 3.5) render partial lines.
    • wrapper (React.FunctionComponent): A custom component to wrap individual skeleton elements.
    • circle (boolean, default: false): Sets border-radius to 50%.
    • className (string): Custom class name for individual skeleton elements (added alongside react-loading-skeleton).
    • containerClassName (string): Custom class name for the <span> wrapping the elements.
    • containerTestId (string): Adds a data-testid attribute to the container.
    • style (React.CSSProperties): Escape hatch for advanced styling (props like width take priority).

    Shared props (Skeleton and SkeletonTheme):

    • baseColor (string, default: #ebebeb): Background color.
    • highlightColor (string, default: #f5f5f5): Animation highlight color.
    • width (string | number, default: 100%): Width of the skeleton.
    • height (string | number, default: font size): Height of each line.
    • borderRadius (string | number, default: 0.25rem): Border radius.
    • inline (boolean, default: false): If true, no <br /> is inserted after skeletons.
    • duration (number, default: 1.5): Animation length in seconds.
    • direction ('ltr' | 'rtl', default: 'ltr'): Animation direction.
    • enableAnimation (boolean, default: true): Toggles the animation.
    • customHighlightBackground (string): Overrides the background-image for the highlight element.

  8. Use SkeletonTheme to provide consistent styles to child skeletons

    master
    Wrap a component tree with the SkeletonTheme component to apply specific styling options to all Skeleton components within that tree. This uses a provider pattern to pass SkeletonStyleProps down via context. Any Skeleton component rendered as a descendant of SkeletonTheme will inherit these styles instead of using the default theme.

  10. Configure SkeletonStyleProps

    master

    The Skeleton component inherits styling properties from SkeletonStyleProps. These properties can be passed directly to the Skeleton component or provided via a SkeletonTheme.

    PropTypeDescription
    baseColorstringThe background color of the skeleton.
    highlightColorstringThe color of the animation highlight.
    widthstring | numberThe width of the skeleton.
    heightstring | numberThe height of the skeleton.
    borderRadiusstring | numberThe border radius of the skeleton.
    direction'ltr' | 'rtl'The direction of the animation. 'rtl' reverses the animation direction.
    durationnumberThe duration of the animation in seconds.
    enableAnimationbooleanWhether to enable the animation. If false, the highlight pseudo-element is hidden.
    customHighlightBackgroundstringA custom background value for the highlight effect.
    inlinebooleanIf true, skeletons are rendered without <br /> tags between them.

  11. Configure SkeletonProps

    master

    The Skeleton component accepts the following props to control its appearance and behavior:

    PropTypeDescription
    countnumberNumber of skeleton elements to render. Supports decimals for fractional widths.
    wrapperReact.FunctionComponent<PropsWithChildren<unknown>>A component that wraps each individual skeleton element.
    classNamestringAdditional CSS class applied to the skeleton <span> elements.
    containerClassNamestringCSS class applied to the outer container <span>.
    containerTestIdstringdata-testid applied to the outer container <span>.
    circlebooleanIf true, sets borderRadius to 50%.
    styleCSSPropertiesStandard React inline styles applied to the skeleton elements.
    ...originalPropsStyleOptionsSkeletonStylePropsInherited props from SkeletonStyleProps (see below).

  12. Use the Skeleton component

    master

    The Skeleton component is used to display loading placeholders. It can render a single skeleton or multiple skeletons based on the count prop. It supports theming via SkeletonThemeContext, where component props take priority over context values, and the style prop has the lowest priority.

    Key features:

    • Multiple Skeletons: Use the count prop to render multiple lines. If count is a decimal (e.g., 3.5), the last skeleton will be rendered with a fractional width.
    • Circular Skeletons: Use the circle prop to render a circular placeholder.
    • Custom Wrappers: Use the wrapper prop to wrap each skeleton element in a custom component.
    • Layout Control: Use the inline prop (from SkeletonStyleProps) to prevent the component from adding <br /> tags between skeletons, allowing them to sit side-by-side.