{"id":15823288,"url":"https://github.com/weffe/react-placeholder-fallback","last_synced_at":"2026-02-01T11:32:41.147Z","repository":{"id":57342516,"uuid":"168581422","full_name":"Weffe/react-placeholder-fallback","owner":"Weffe","description":"Easily manage when to show placeholders and fallback ui with React","archived":false,"fork":false,"pushed_at":"2020-06-02T00:38:40.000Z","size":3263,"stargazers_count":2,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-06T08:07:22.289Z","etag":null,"topics":["fallback","placeholder","react","shell","typescript"],"latest_commit_sha":null,"homepage":"https://react-placeholder-fallback.netlify.com/","language":"JavaScript","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/Weffe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-31T19:14:11.000Z","updated_at":"2021-04-23T09:38:18.000Z","dependencies_parsed_at":"2022-09-16T02:50:28.914Z","dependency_job_id":null,"html_url":"https://github.com/Weffe/react-placeholder-fallback","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weffe%2Freact-placeholder-fallback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weffe%2Freact-placeholder-fallback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weffe%2Freact-placeholder-fallback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weffe%2Freact-placeholder-fallback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Weffe","download_url":"https://codeload.github.com/Weffe/react-placeholder-fallback/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640055,"owners_count":20971549,"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":["fallback","placeholder","react","shell","typescript"],"created_at":"2024-10-05T08:07:49.245Z","updated_at":"2026-02-01T11:32:41.116Z","avatar_url":"https://github.com/Weffe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Placeholder Fallback\n\nEasily manage when to show placeholders and fallback ui\n\n[![npm version](http://img.shields.io/npm/v/react-placeholder-fallback.svg)](https://npmjs.org/package/react-placeholder-fallback \"View this project on npm\") [![Greenkeeper badge](https://badges.greenkeeper.io/Weffe/react-placeholder-fallback.svg)](https://greenkeeper.io/)\n\n## Quick Start\n\n### Install\n\n\u003cdetails open\u003e\n\u003csummary\u003enpm\u003c/summary\u003e\n\n```bash\nnpm install --save react-placeholder-fallback\n```\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003eyarn\u003c/summary\u003e\n\n```bash\nyarn add react-placeholder-fallback\n```\n\u003c/details\u003e\n\n### Usage\n\n```JSX\nimport * as React from 'react';\nimport { PlaceholderFallback, Placeholders } from 'react-placeholder-fallback';\nimport 'react-placeholder-fallback/dist/index.css'; // required if using prebuilt placeholders\n\nclass App extends React.Component {\n    render() {\n        return (\n            \u003cPlaceholderFallback placeholder={Placeholders.ParagraphBlock} /\u003e\n        )\n    }\n}\n```\n\n## What gap does this fill?\n\nTypically one would use placeholders to simulate data is loading from a network request. This component lets you easily manage showing a placeholder and also showing a fallback message in case the network request fails. You also are in complete control of when to show the `PlaceholderFallback` rather then having to provide a \"ready\" predicate to the component like other solutions.\n\n## TypeScript Support\n\nThis library has first class support for TypeScript. Types are automatically included and don't need to be downloaded from the `@types` repository.\n\n## Documentation\n\n[Visit the online docs](https://react-placeholder-fallback.netlify.com/)\n\n## Motivation\n\nThis project is inspired from other solutions like:\n    \n1. https://github.com/buildo/react-placeholder\n2. https://github.com/danilowoz/react-content-loader\n3. https://github.com/krishnaxv/app-shell-placeholder\n4. https://github.com/dvtng/react-loading-skeleton\n\nHowever, for my own personal needs I needed a solution that could work with very strict Content Security Policies (CSP), needed to be WCAG compliant (e.g. no use of style keyword), needed to be responsive, and could degrade nicely in Internet Explorer 11. So I stuck to using plain CSS for the styling without using fancier styling solutions like `emotion` or `styled-components` that some placeholder libraries used. Second, having used `react-placeholder` in the past I felt better about having direct control in my render method of when to render the `Placeholder` or not. So I stuck with that in mind while making this library. Lastly, I wanted a nice way to handle network request failures which other placeholder libraries don't really provide.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweffe%2Freact-placeholder-fallback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweffe%2Freact-placeholder-fallback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweffe%2Freact-placeholder-fallback/lists"}