Nattily Primped Monster

    react-loading-skeleton
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published
    Logo

    React Loading Skeleton

    Make beautiful, animated loading skeletons that automatically adapt to your app.

    Open on CodeSandbox

    Gif of the skeleton in action

    Learn about the changes in version 3, or view the v2 documentation.

    Basic Usage

    Install via one of:

    yarn add react-loading-skeleton
    npm install react-loading-skeleton
    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

    Principles

    Adapts to the styles you have defined

    The Skeleton component should be used directly in your components in place of content that is loading. While other libraries require you to meticulously craft a skeleton screen that matches the font size, line height, and margins of your content, the Skeleton component is automatically sized to the correct dimensions.

    For example:

    function BlogPost(props) {
        return (
            <div>
                <h1>{props.title || <Skeleton />}</h1>
                {props.body || <Skeleton count={10} />}
            </div>
        )
    }

    ...will produce correctly-sized skeletons for the heading and body without any further configuration.

    This ensures the loading state remains up-to-date with any changes to your layout or typography.

    Don't make dedicated skeleton screens

    Instead, make components with built-in skeleton states.

    This approach is beneficial because:

    1. It keeps styles in sync.
    2. Components should represent all possible states — loading included.
    3. It allows for more flexible loading patterns. In the blog post example above, it's possible to have the title load before the body, while having both pieces of content show loading skeletons at the right time.

    Theming

    Customize individual skeletons with props, or render a SkeletonTheme to style all skeletons below it in the React hierarchy:

    import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
    
    return (
        <SkeletonTheme baseColor="#202020" highlightColor="#444">
            <p>
                <Skeleton count={3} />
            </p>
        </SkeletonTheme>
    )

    Props Reference

    Skeleton only

    Prop Description Default
    count?: number The number of lines of skeletons to render. If count is a decimal number like 3.5, three full skeletons and one half-width skeleton will be rendered. 1
    wrapper?: React.FunctionComponent
    <PropsWithChildren<unknown>>
    A custom wrapper component that goes around the individual skeleton elements.
    circle?: boolean Makes the skeleton circular by setting border-radius to 50%. false
    className?: string A custom class name for the individual skeleton elements which is used alongside the default class, react-loading-skeleton.
    containerClassName?: string A custom class name for the <span> that wraps the individual skeleton elements.
    containerTestId?: string A string that is added to the container element as a data-testid attribute. Use it with screen.getByTestId('...') from React Testing Library.
    style?: React.CSSProperties This is an escape hatch for advanced use cases and is not the preferred way to style the skeleton. Props (e.g. width, borderRadius) take priority over this style object.

    Skeleton and SkeletonTheme

    Prop Description Default
    baseColor?: string The background color of the skeleton. #ebebeb
    highlightColor?: string The highlight color in the skeleton animation. #f5f5f5
    width?: string | number The width of the skeleton. 100%
    height?: string | number The height of each skeleton line. The font size
    borderRadius?: string | number The border radius of the skeleton. 0.25rem
    inline?: boolean By default, a <br /> is inserted after each skeleton so that each skeleton gets its own line. When inline is true, no line breaks are inserted. false
    duration?: number The length of the animation in seconds. 1.5
    direction?: 'ltr' | 'rtl' The direction of the animation, either left-to-right or right-to-left. 'ltr'
    enableAnimation?: boolean Whether the animation should play. The skeleton will be a solid color when this is false. You could use this prop to stop the animation if an error occurs. true

    Examples

    Custom Wrapper

    There are two ways to wrap a skeleton in a container:

    function Box({ children }: PropsWithChildren<unknown>) {
        return (
            <div
                style={{
                    border: '1px solid #ccc',
                    display: 'block',
                    lineHeight: 2,
                    padding: '1rem',
                    marginBottom: '0.5rem',
                    width: 100,
                }}
            >
                {children}
            </div>
        )
    }
    
    // Method 1: Use the wrapper prop
    const wrapped1 = <Skeleton wrapper={Box} count={5} />
    
    // Method 2: Do it "the normal way"
    const wrapped2 = (
        <Box>
            <Skeleton />
        </Box>
    )

    The height of my container is off by a few pixels!

    In the example below, the height of the <div> will be slightly larger than 30 even though the react-loading-skeleton element is exactly 30px.

    <div>
        <Skeleton height={30} />
    </div>

    This is a consequence of how line-height works in CSS. If you need the <div> to be exactly 30px tall, set its line-height to 1. See here for more details.

    Contributing

    Contributions are welcome! See CONTRIBUTING.md to get started.

    Acknowledgements

    Our logo is based off an image from Font Awesome. Thanks!

    Install

    npm i react-loading-skeleton

    DownloadsWeekly Downloads

    315,880

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    25.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • dvtng