{"id":13400595,"url":"https://github.com/dvtng/react-loading-skeleton","last_synced_at":"2025-05-13T15:07:47.012Z","repository":{"id":37712952,"uuid":"94892428","full_name":"dvtng/react-loading-skeleton","owner":"dvtng","description":"Create skeleton screens that automatically adapt to your app!","archived":false,"fork":false,"pushed_at":"2024-12-12T23:16:48.000Z","size":5593,"stargazers_count":4120,"open_issues_count":8,"forks_count":159,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-06T14:51:56.106Z","etag":null,"topics":["javascript","loading-animations","placeholder","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dvtng.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-20T13:09:21.000Z","updated_at":"2025-05-06T08:19:49.000Z","dependencies_parsed_at":"2022-07-10T02:30:37.640Z","dependency_job_id":"e980d36d-b1d2-4dbd-9a84-ae6795bd78db","html_url":"https://github.com/dvtng/react-loading-skeleton","commit_stats":{"total_commits":208,"total_committers":26,"mean_commits":8.0,"dds":"0.48557692307692313","last_synced_commit":"f8b040dade9cfaad7e3e6fbc50243d79f508f1ca"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvtng%2Freact-loading-skeleton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvtng%2Freact-loading-skeleton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvtng%2Freact-loading-skeleton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvtng%2Freact-loading-skeleton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dvtng","download_url":"https://codeload.github.com/dvtng/react-loading-skeleton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969228,"owners_count":21992262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","loading-animations","placeholder","react"],"created_at":"2024-07-30T19:00:53.719Z","updated_at":"2025-05-13T15:07:46.971Z","avatar_url":"https://github.com/dvtng.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/dvtng/react-loading-skeleton\"\u003e\n        \u003cimg src=\"assets/logo.svg\" alt=\"Logo\" width=\"80\" height=\"80\" /\u003e\n    \u003c/a\u003e\n    \u003ch1 align=\"center\"\u003eReact Loading Skeleton\u003c/h1\u003e\n    \u003cp align=\"center\"\u003e\n        Make beautiful, animated loading skeletons that automatically adapt to your app.\n    \u003c/p\u003e\n    \u003ch3\u003e\n    \u003c!--\u003ca href=\"https://dvtng.github.io/react-loading-skeleton\"\u003eView Live Demo\u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026bull;\u0026nbsp;\u0026nbsp;--\u003e\n    \u003ca href=\"https://codesandbox.io/s/react-loading-skeleton-3xwil?file=/src/App.tsx\"\u003eOpen on CodeSandbox\u003c/a\u003e\n    \u003c/h3\u003e\n    \u003cimg src=\"https://media.giphy.com/media/l0Iyk4bAAjac3AU2k/giphy.gif\" alt=\"Gif of the skeleton in action\"\u003e\n\u003c/div\u003e\n\nLearn about the [changes in version\n3](https://github.com/dvtng/react-loading-skeleton/releases/tag/v3.0.0), or view\nthe [v2\ndocumentation](https://github.com/dvtng/react-loading-skeleton/tree/v2#readme).\n\n## Basic Usage\n\nInstall via one of:\n\n```bash\nyarn add react-loading-skeleton\nnpm install react-loading-skeleton\n```\n\n```tsx\nimport Skeleton from 'react-loading-skeleton'\nimport 'react-loading-skeleton/dist/skeleton.css'\n\n\u003cSkeleton /\u003e // Simple, single-line loading skeleton\n\u003cSkeleton count={5} /\u003e // Five-line loading skeleton\n```\n\n## Principles\n\n### Adapts to the styles you have defined\n\nThe `Skeleton` component should be used directly in your components in place of\ncontent that is loading. While other libraries require you to meticulously craft\na skeleton screen that matches the font size, line height, and margins of your\ncontent, the `Skeleton` component is automatically sized to the correct\ndimensions.\n\nFor example:\n\n```tsx\nfunction BlogPost(props) {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{props.title || \u003cSkeleton /\u003e}\u003c/h1\u003e\n      {props.body || \u003cSkeleton count={10} /\u003e}\n    \u003c/div\u003e\n  );\n}\n```\n\n...will produce correctly-sized skeletons for the heading and body without any\nfurther configuration.\n\nThis ensures the loading state remains up-to-date with any changes\nto your layout or typography.\n\n### Don't make dedicated skeleton screens\n\nInstead, make components with _built-in_ skeleton states.\n\nThis approach is beneficial because:\n\n1. It keeps styles in sync.\n2. Components should represent all possible states — loading included.\n3. It allows for more flexible loading patterns. In the blog post example above,\n   it's possible to have the title load before the body, while having both\n   pieces of content show loading skeletons at the right time.\n\n## Theming\n\nCustomize individual skeletons with props, or render a `SkeletonTheme` to style\nall skeletons below it in the React hierarchy:\n\n```tsx\nimport Skeleton, { SkeletonTheme } from 'react-loading-skeleton';\n\nreturn (\n  \u003cSkeletonTheme baseColor=\"#202020\" highlightColor=\"#444\"\u003e\n    \u003cp\u003e\n      \u003cSkeleton count={3} /\u003e\n    \u003c/p\u003e\n  \u003c/SkeletonTheme\u003e\n);\n```\n\n## Props Reference\n\n### `Skeleton` only\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eProp\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n            \u003cth\u003eDefault\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003ecount?: number\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                The number of lines of skeletons to render. If\n                \u003ccode\u003ecount\u003c/code\u003e is a decimal number like 3.5,\n                three full skeletons and one half-width skeleton will be\n                rendered.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003ewrapper?: React.FunctionComponent \u003cbr\u003e \u0026lt;PropsWithChildren\u0026lt;unknown\u0026gt;\u0026gt;\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                A custom wrapper component that goes around the individual skeleton\n                elements.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003ecircle?: boolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                Makes the skeleton circular by setting \u003ccode\u003eborder-radius\u003c/code\u003e to\n                \u003ccode\u003e50%\u003c/code\u003e.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003eclassName?: string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                A custom class name for the individual skeleton elements which is used\n                alongside the default class, \u003ccode\u003ereact-loading-skeleton\u003c/code\u003e.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003econtainerClassName?: string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                A custom class name for the \u003ccode\u003e\u0026lt;span\u0026gt;\u003c/code\u003e that wraps the\n                individual skeleton elements.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003econtainerTestId?: string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                A string that is added to the container element as a\n                \u003ccode\u003edata-testid\u003c/code\u003e attribute. Use it with\n                \u003ccode\u003escreen.getByTestId('...')\u003c/code\u003e from React Testing Library.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003estyle?: React.CSSProperties\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                This is an escape hatch for advanced use cases and is not the preferred\n                way to style the skeleton. Props (e.g. \u003ccode\u003ewidth\u003c/code\u003e,\n                \u003ccode\u003eborderRadius\u003c/code\u003e) take priority over this style object.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### `Skeleton` and `SkeletonTheme`\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eProp\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n            \u003cth\u003eDefault\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003ebaseColor?: string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe background color of the skeleton.\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e#ebebeb\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003ehighlightColor?: string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe highlight color in the skeleton animation.\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e#f5f5f5\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003ewidth?: string | number\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe width of the skeleton.\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e100%\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003eheight?: string | number\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe height of each skeleton line.\u003c/td\u003e\n            \u003ctd\u003eThe font size\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003eborderRadius?: string | number\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe border radius of the skeleton.\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e0.25rem\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003einline?: boolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                By default, a \u003ccode\u003e\u0026lt;br /\u0026gt;\u003c/code\u003e is inserted after each skeleton so\n                that each skeleton gets its own line. When \u003ccode\u003einline\u003c/code\u003e is true, no\n                line breaks are inserted.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003eduration?: number\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe length of the animation in seconds.\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e1.5\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003edirection?: 'ltr' | 'rtl'\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                The direction of the animation, either left-to-right or right-to-left.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e'ltr'\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003eenableAnimation?: boolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                Whether the animation should play. The skeleton will be a solid color when\n                this is \u003ccode\u003efalse\u003c/code\u003e. You could use this prop to stop the animation\n                if an error occurs.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003ccode\u003ecustomHighlightBackground?: string\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                Allows you to override the \u003ccode\u003ebackground-image\u003c/code\u003e property of the highlight element, enabling you to fully customize the gradient. See example below.\n            \u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Examples\n\n### Custom Wrapper\n\nThere are two ways to wrap a skeleton in a container:\n\n```tsx\nfunction Box({ children }: PropsWithChildren\u003cunknown\u003e) {\n  return (\n    \u003cdiv\n      style={{\n        border: '1px solid #ccc',\n        display: 'block',\n        lineHeight: 2,\n        padding: '1rem',\n        marginBottom: '0.5rem',\n        width: 100,\n      }}\n    \u003e\n      {children}\n    \u003c/div\u003e\n  );\n}\n\n// Method 1: Use the wrapper prop\nconst wrapped1 = \u003cSkeleton wrapper={Box} count={5} /\u003e;\n\n// Method 2: Do it \"the normal way\"\nconst wrapped2 = (\n  \u003cBox\u003e\n    \u003cSkeleton /\u003e\n  \u003c/Box\u003e\n);\n```\n\n### Custom Highlight Background\n\nYou may want to make the gradient used in the highlight element narrower or wider. To do this, you can set the `customHighlightBackground` prop. Here's an example of a narrow highlight:\n\n```tsx\n\u003cSkeleton customHighlightBackground=\"linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)\" /\u003e\n```\n\n**If you use this prop, the `baseColor` and `highlightColor` props are ignored,** but you can still reference their corresponding CSS variables as shown in the above example.\n\n![Custom highlight background example](assets/custom-highlight-background.png)\n\n## Troubleshooting\n\n### The skeleton width is 0 when the parent has `display: flex`!\n\nIn the example below, the width of the skeleton will be 0:\n\n```tsx\n\u003cdiv style={{ display: 'flex' }}\u003e\n  \u003cSkeleton /\u003e\n\u003c/div\u003e\n```\n\nThis happens because the skeleton has no intrinsic width. You can fix it by\napplying `flex: 1` to the skeleton container via the `containerClassName` prop.\n\nFor example, if you are using Tailwind, your code would look like this:\n\n```tsx\n\u003cdiv style={{ display: 'flex' }}\u003e\n  \u003cSkeleton containerClassName=\"flex-1\" /\u003e\n\u003c/div\u003e\n```\n\n### The height of my container is off by a few pixels!\n\nIn the example below, the height of the `\u003cdiv\u003e` will be slightly larger than 30\neven though the `react-loading-skeleton` element is exactly 30px.\n\n```tsx\n\u003cdiv\u003e\n  \u003cSkeleton height={30} /\u003e\n\u003c/div\u003e\n```\n\nThis is a consequence of how `line-height` works in CSS. If you need the `\u003cdiv\u003e`\nto be exactly 30px tall, set its `line-height` to 1. [See\nhere](https://github.com/dvtng/react-loading-skeleton/issues/23#issuecomment-939231878)\nfor more details.\n\n## Contributing\n\nContributions are welcome! See `CONTRIBUTING.md` to get started.\n\n## Acknowledgements\n\nOur logo is based off an image from [Font\nAwesome](https://fontawesome.com/license/free). Thanks!\n","funding_links":[],"categories":["Uncategorized","TypeScript","ReactJS","**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","React [🔝](#readme)"],"sub_categories":["Uncategorized","UI","React"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvtng%2Freact-loading-skeleton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdvtng%2Freact-loading-skeleton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvtng%2Freact-loading-skeleton/lists"}