{"id":3982,"url":"https://github.com/mfrachet/rn-placeholder","last_synced_at":"2025-04-11T03:29:57.450Z","repository":{"id":20719760,"uuid":"90545878","full_name":"mfrachet/rn-placeholder","owner":"mfrachet","description":"🏖️ Display some placeholder stuff before rendering your text or media content in React Native","archived":false,"fork":false,"pushed_at":"2023-01-26T13:18:17.000Z","size":13988,"stargazers_count":2132,"open_issues_count":24,"forks_count":183,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-09T16:47:55.896Z","etag":null,"topics":["placeholder","react","react-native","ux"],"latest_commit_sha":null,"homepage":"https://mfrachet.github.io/rn-placeholder/","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/mfrachet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-07T16:22:54.000Z","updated_at":"2025-04-03T16:36:31.000Z","dependencies_parsed_at":"2023-02-15T14:01:28.773Z","dependency_job_id":null,"html_url":"https://github.com/mfrachet/rn-placeholder","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfrachet%2Frn-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfrachet%2Frn-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfrachet%2Frn-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfrachet%2Frn-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfrachet","download_url":"https://codeload.github.com/mfrachet/rn-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322603,"owners_count":21084336,"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":["placeholder","react","react-native","ux"],"created_at":"2024-01-05T20:16:57.579Z","updated_at":"2025-04-11T03:29:57.431Z","avatar_url":"https://github.com/mfrachet.png","language":"TypeScript","funding_links":[],"categories":["Components","Uncategorized","TypeScript","Libraries","React Native [🔝](#readme)","Others"],"sub_categories":["UI","Uncategorized"],"readme":"**This project is looking for motivated maintainers, see [this issue](https://github.com/mfrachet/rn-placeholder/issues/179) for more information.**\n\n[![Build Status](https://travis-ci.org/mfrachet/rn-placeholder.svg?branch=master)](https://travis-ci.org/mfrachet/rn-placeholder)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nDisplay some placeholder stuff before rendering your text or media content in React Native. Compatible with [Expo](https://expo.io/) and [react-native-web](https://github.com/necolas/react-native-web).\n\n- [Snack application **with copy to clipboard!**](https://snack.expo.io/@mfrachet/84bb31)\n- [Usage with react-native-web](https://mfrachet.github.io/rn-placeholder)\n- [The N Props syndrome (post)](https://mfrachet.github.io/the-n-props-syndrome): explaining the transition between v2 and v3\n\n---\n\n![Image of the placeholder in action](./assets/placeholder.gif)\n\n# Usage\n\n## Installation\n\n```javascript\n$ yarn add rn-placeholder\n```\n\n## In your code\n\n```jsx\nimport {\n  Placeholder,\n  PlaceholderMedia,\n  PlaceholderLine,\n  Fade\n} from \"rn-placeholder\";\n\nconst App = () =\u003e (\n  \u003cPlaceholder\n    Animation={Fade}\n    Left={PlaceholderMedia}\n    Right={PlaceholderMedia}\n  \u003e\n    \u003cPlaceholderLine width={80} /\u003e\n    \u003cPlaceholderLine /\u003e\n    \u003cPlaceholderLine width={30} /\u003e\n  \u003c/Placeholder\u003e\n);\n```\n\nThe v3 comes with an example app that provides different stories and example of the library:\n\n- [Stories for elements](./example/storybook/stories/elements.tsx)\n- [Stories for animations](./example/storybook/stories/animations.tsx)\n- [Stories for customizing elements](./example/storybook/stories/customizeElements.tsx)\n- [Stories for customizing animations](./example/storybook/stories/customizeAnimation.tsx)\n\n## Run the example apps\n\n_You can modify any call of `yarn` by `npm install`_\n\n### To start the mobile app:\n\n```sh\n$ git clone https://github.com/mfrachet/rn-placeholder\n$ cd rn-placeholder\n$ yarn\n$ cd ./example \u0026\u0026 yarn \u0026\u0026 yarn start\n```\n\n### To start the web app:\n\n```sh\n$ git clone https://github.com/mfrachet/rn-placeholder\n$ cd rn-placeholder\n$ yarn\n$ cd ./example-web \u0026\u0026 yarn \u0026\u0026 yarn start\n```\n\nThe web app is also available in this github pages: https://mfrachet.github.io/rn-placeholder.\n\n## V3 features\n\n- Rewritten in [Typescript](https://www.typescriptlang.org/)\n- Less code, more fun 😎\n- API [Suspense](https://reactjs.org/docs/code-splitting.html#suspense) oriented\n- [New animations](./src/animations)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfrachet%2Frn-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfrachet%2Frn-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfrachet%2Frn-placeholder/lists"}