{"id":13672770,"url":"https://github.com/buildo/react-placeholder","last_synced_at":"2025-05-14T13:03:55.941Z","repository":{"id":34297535,"uuid":"38199527","full_name":"buildo/react-placeholder","owner":"buildo","description":"A React component to easily replicate your page with nice placeholders while the content is loading","archived":false,"fork":false,"pushed_at":"2023-09-13T12:45:26.000Z","size":3145,"stargazers_count":1613,"open_issues_count":23,"forks_count":96,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-08T20:02:52.830Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"jamalex/notion-py","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/buildo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-28T13:19:43.000Z","updated_at":"2025-01-29T14:16:25.000Z","dependencies_parsed_at":"2024-06-18T12:37:11.702Z","dependency_job_id":null,"html_url":"https://github.com/buildo/react-placeholder","commit_stats":{"total_commits":164,"total_committers":26,"mean_commits":"6.3076923076923075","dds":0.4207317073170732,"last_synced_commit":"df540252d208513fef6b0f3c7577dd49408d8b1f"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buildo","download_url":"https://codeload.github.com/buildo/react-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149823,"owners_count":22022850,"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":["react"],"created_at":"2024-08-02T09:01:47.351Z","updated_at":"2025-05-14T13:03:55.902Z","avatar_url":"https://github.com/buildo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","React","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["React Components"],"readme":"# React Placeholder\nA React component to easily replicate your page with nice placeholders while the content is loading.\nYou can use a placeholder from the default set, or pass your own!\n\n![image](https://cloud.githubusercontent.com/assets/691940/24140211/78406120-0e1f-11e7-9738-af2b2434c50e.png)\n\n```jsx\nimport ReactPlaceholder from 'react-placeholder';\nimport \"react-placeholder/lib/reactPlaceholder.css\";\n\nReact.renderComponent(\n  \u003cdiv\u003e\n    \u003cReactPlaceholder type='media' rows={7} ready={this.state.ready}\u003e\n      \u003cMyComponent /\u003e\n    \u003c/ReactPlaceholder\u003e\n  \u003c/div\u003e,\n  document.body);\n```\n\n[**Live Demo**](http://buildo.github.io/react-placeholder/#!/ReactPlaceholder)\n\n### Install\n```\nnpm install --save react-placeholder\n```\n\n### Props\n\n```tsx\nchildren:              ReactNode;\nready:                 boolean;\ndelay?:                number;\nfirstLaunchOnly?:      boolean;\nshowLoadingAnimation?: boolean;\ntype?:                 'text' | 'media' | 'textRow' | 'rect' | 'round';\nrows?:                 number;\ncolor?:                string;\ncustomPlaceholder?:    ReactElement;\nclassName?:            string;\nstyle?:                CSSProperties;\n```\n\nThe default props will render a `text` placeholder with `3` rows and the color `#CDCDCD`.\n\n### Customization\nIf the built-in set of placeholders is not enough, you can pass you own through the prop **\"customPlaceholder\"**\n\n```jsx\n\u003cReactPlaceholder ready={this.state.ready} customPlaceholder={\u003cMyCustomPlaceholder /\u003e}\u003e\n  \u003cMyComponent /\u003e\n\u003c/ReactPlaceholder\u003e\n```\n\nYou can also import the built-in placeholders directly. This might be useful to use them to create your own customized placeholder:\n\n```jsx\nimport {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from 'react-placeholder/lib/placeholders';\n\nconst awesomePlaceholder = (\n  \u003cdiv className='my-awesome-placeholder'\u003e\n    \u003cRectShape color='blue' style={{width: 30, height: 80}}/\u003e\n    \u003cTextBlock rows={7} color='yellow'/\u003e\n  \u003c/div\u003e\n);\n\n\u003cReactPlaceholder ready={this.state.ready} customPlaceholder={awesomePlaceholder}\u003e\n  \u003cMyComponent /\u003e\n\u003c/ReactPlaceholder\u003e\n```\n\n### Delay\nYou can pass an optional `delay` prop which specifies the time (in milliseconds) `react-placeholder` should wait before displaying the placeholder element. This is useful if you want to show a placeholder for slower connections while avoiding a brief \"flash\" on faster connections.\n\nNote that this delay will __not__ affect the initial render, only subsequent \"ready\" state changes. Setting the `firstLaunchOnly` prop to `true` will also disable this feature.\n\n### Animation\n`react-placeholder` already comes with one default pulse animation to better tell the user that the page is loading.\nThe animation is defined in a separate CSS file so, in order to enable it, you should import that style in your project like this:\n\n```js\nimport 'react-placeholder/lib/reactPlaceholder.css';\n```\n\nOnce you've done this, you can simply pass the boolean prop `showLoadingAnimation` to tell `ReactPlaceholder` to animate itself:\n\n```jsx\nimport 'react-placeholder/lib/reactPlaceholder.css';\n\n\u003cReactPlaceholder showLoadingAnimation ready={this.state.ready} type=\"media\" rows={5}\u003e\n  \u003cp\u003eThis is a Test.\u003c/p\u003e\n\u003c/ReactPlaceholder\u003e\n```\n\n### Style\nyou can style the placeholder by passing **```className```** or **```style```** or by using the built-in classes:\n\n*\"text-block\", \"media-block\", \"text-row\", \"rect-shape\", \"round-shape\".*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildo%2Freact-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuildo%2Freact-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildo%2Freact-placeholder/lists"}