{"id":4190,"url":"https://github.com/sarmad1995/react-native-easy-content-loader","last_synced_at":"2025-06-25T17:02:17.068Z","repository":{"id":42965897,"uuid":"168203236","full_name":"sarmad1995/react-native-easy-content-loader","owner":"sarmad1995","description":"A light weight  and customisable content loader for react native apps, will work both on expo and init projects.","archived":false,"fork":false,"pushed_at":"2023-03-04T05:16:10.000Z","size":1260,"stargazers_count":230,"open_issues_count":1,"forks_count":23,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-01T09:35:50.718Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/sarmad1995.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE_LOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-01-29T18:09:25.000Z","updated_at":"2024-11-29T21:45:52.000Z","dependencies_parsed_at":"2024-01-08T01:02:17.086Z","dependency_job_id":"fec78d89-313d-4f60-a102-3432f6c387da","html_url":"https://github.com/sarmad1995/react-native-easy-content-loader","commit_stats":null,"previous_names":["sarmad1995/react-native-content-loader"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarmad1995%2Freact-native-easy-content-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarmad1995%2Freact-native-easy-content-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarmad1995%2Freact-native-easy-content-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarmad1995%2Freact-native-easy-content-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sarmad1995","download_url":"https://codeload.github.com/sarmad1995/react-native-easy-content-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"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":[],"created_at":"2024-01-05T20:17:03.949Z","updated_at":"2024-12-07T07:31:31.937Z","avatar_url":"https://github.com/sarmad1995.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"[![NPM Version][npm-image]][npm-url]\n[![Downloads Stats][npm-downloads]][npm-url]\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"400\" alt=\"Example's react-native-easycontent-loader\" src=\"https://user-images.githubusercontent.com/38377482/63653305-932a1880-c788-11e9-8f74-aeb758e11336.gif\" /\u003e\n\u003c/p\u003e\n\nProvide a placeholder at the place which need waiting for loading,\nEasy to implement and fun to use, this package is highly customizable, Please go through docs to find info :).\n\n###\n\n### I tried to move this package to @sarmad1995/react-native-content-loader, but seems like people are using this version a lot, so I will be maintaining this version from now, @sarmad1995/react-native-content-loader also has all the features.\n\n## Features\n\n- :gear: **Customizable:** Feel free to change the colors, speed, sizes, paragraphs, title and much more.\n- ⚛️ **Lightweight:** Lightweight with only neccessory code.\n- :tada: **Typescript:** Fully typed\n\n## Index\n\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n- [Options](#options)\n- [Examples](#examples)\n\n## Getting Started\n\n```sh\nnpm install react-native-easy-content-loader --save\nyarn add react-native-easy-content-loader\n```\n\n## Examples\n\n### Simple Example\n\n```jsx\n\u003cContentLoader active /\u003e\n```\n\n### With Avatar\n\n```jsx\n\u003cContentLoader active avatar /\u003e\n```\n\n### With Loading State\n\n```jsx\n\u003cContentLoader active avatar loading={this.state.loading}\u003e\n  \u003cText\u003eThis would be rendered with loading is false\u003c/Text\u003e\n\u003c/ContentLoader\u003e\n```\n\n### Number of paragraphs\n\n```jsx\n\u003cContentLoader active avatar pRows={4} /\u003e\n```\n\n### Different Widths for differnt paragrahs lines\n\n```jsx\n\u003cContentLoader active avatar pRows={4} pWidth={[\"100%\", 200, \"25%\", 45]} /\u003e\n```\n\n### Facebook and Instagram Style\n\nThese are also flexible and customizable\n\n|                                                     Facebook loader                                                     |                                                     Instagram loader                                                     |\n| :---------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: |\n| ![Facebook Style](https://user-images.githubusercontent.com/38377482/63653305-932a1880-c788-11e9-8f74-aeb758e11336.gif) | ![Instagram Style](https://user-images.githubusercontent.com/38377482/63653295-7a216780-c788-11e9-9f02-88e5f71cd5cd.gif) |\n\n```jsx\nimport { FacebookLoader, InstagramLoader } from 'react-native-easy-content-loader';\n\n\u003cFacebookLoader active /\u003e\n\n\u003cInstagramLoader active /\u003e\n```\n\n### Bullets Style\n\n```jsx\n\u003cBullets active listSize={10} /\u003e\n```\n\n![Bullets Style](https://user-images.githubusercontent.com/38377482/63653257-054e2d80-c788-11e9-8b15-eb8e1c39885e.gif)\n\n### Default Style\n\n## It is highly customizable, please refer the options sections.\n\n```jsx\nimport ContentLoader from \"react-native-easy-content-loader\";\n\u003cContentLoader\n  avatar\n  pRows={5}\n  pHeight={[100, 30, 20]}\n  pWidth={[100, 70, 100]}\n/\u003e;\n```\n\n|                                                Added custom heights and widths                                                |                                                    Same with other loaders                                                    |\n| :---------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: |\n| \u003cimg width=\"300\" src=\"https://user-images.githubusercontent.com/38377482/69658435-2fbec800-10a2-11ea-9641-b96a3183aca4.png\"/\u003e | \u003cimg width=\"300\" src=\"https://user-images.githubusercontent.com/38377482/69658445-36e5d600-10a2-11ea-991e-e4833e1996a2.png\"/\u003e |\n\nSome more examples,\n\n```jsx\n\u003cFacebookLoader pHeight={[20, 10]} /\u003e\n\u003cContentLoader reverse avatar pRows={5} pHeight={[40, 30, 20]} /\u003e\n\n```\n\n```jsx\n\u003cContentLoader active listSize={10} /\u003e\n```\n\n|                                                        Default Loader                                                        |                                                           Colored                                                            |\n| :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |\n| ![ContentLoader Style](https://user-images.githubusercontent.com/38377482/63653286-5d852f80-c788-11e9-8093-2f428e7e3daf.gif) | ![ContentLoader Style](https://user-images.githubusercontent.com/38377482/63653283-434b5180-c788-11e9-84ee-f275a71334bc.gif) |\n\n## Usage\n\n```jsx\nimport ContentLoader, {\n  FacebookLoader,\n  InstagramLoader,\n  Bullets\n} from \"react-native-easy-content-loader\";\n```\n\n```jsx\n\u003cContentLoader active /\u003e\n```\n\n## Options\n\n## These Options are common with every component,\n\n#### **`primaryColor?: string, rgba/hex`**\n\nDefaults to `rgba(220, 220, 220, 1)`.\n\n#### **`secondaryColor? string, rgba/hex`**\n\nDefaults to `rgba(200, 200, 200, 1)`.\n\n#### **`animationDuration? number`**\n\nDefaults to `500`. The animation transition time from primaryColor to secondaryColor\n\n#### **`loading?: bool | null`**\n\nDefaults to `null`, If given a bool value, when false, it will return children (Works as a wrapper component)\n\n#### **`active? bool`**\n\nDefaults to `false`, `true` if you want to animate the compoennt.\n\n#### **`title? bool`**\n\nDefaults to `true`. If you want to show the title, **Works only with ContentLoader**.\n\n#### **`titleStyles? object`**\n\nAdd styles to title.\n\n#### **`listSize? number`**\n\nDefaults to `1`. If you want to render a list of loaders, **Works with all the loaders**.\n\n#### **`avatar? bool`**\n\nDefaults to `false`. If you want to render the avatar.\n\n#### **`aShape? string 'circle' | 'square'`**\n\nDefaults to `circle`. shape of the avatar, can be circle or square.\n\n#### **`aSize? string 'default' 'small' 'large' | number`**\n\nDefaults to `default`. can be a specific number.\n\n#### **`reverse? bool`**\n\nDefaults to `false`. if you want to reverse the view.\n\n#### **`containerStyles? object`**\n\nIf you want to add style to container.\n\n## Title specific options.\n\n#### **`tHeight? string | number`**\n\nUsed to change the title height.\n\n#### **`tWidth? stirng | number`**\n\nUsed to change the title width.\n\n#### **`sTHeight? string | number`**\n\nUsed to change the secondary title height **Works with only Facebook and Instagram**.\n\n#### **`sTWidth? string | number`**\n\nUsed to change the secondary title width **Works with only Facebook and Instagram**.\n\n#### **`titleStyles? object`**\n\nAdd styles to title.\n\n#### **`secondaryTitleStyles? object`**\n\nAdd styles to secondaryTitle. **Works with only Facebook and Instagram**.\n\n## Paragraph specific options.\n\n#### **`pHeight? string | number | array`**\n\nParagraph line height,\nCan specify same height with single value, Or could use array for different heights, eg ['100%', 200, 300], you can use pHeight and pWidth to achieve different shapes as well,\n\n#### **`pWidth? string | number | array`**\n\nParagraph line width,\nCan specify same width with single value, Or could use array for different widths, eg ['100%', 200, 300]\n\n#### **`paragraphStyles? objecct`**\n\nAdd paragraph styles\n\n## Instagram specific options.\n\n#### **`imageHeight? number`**\n\nChange the height of the image\n\n#### **`imageStyles? number`**\n\nAdd styles to image\n\n## Release History\n\nSee \u003ca href=\"https://github.com/sarmad1995/react-native-content-loader/blob/master/CHANGE_LOG.md\"\u003e CHANGE_LOG.md\u003c/a\u003e.\n\n## Contributing\n\nFeel free to contribute, this is still in beta and I have plans to include more features in future :)\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n\n[npm-image]: https://img.shields.io/npm/v/react-native-easy-content-loader.svg\n[npm-url]: https://www.npmjs.com/package/react-native-easy-content-loader\n[npm-downloads]: https://img.shields.io/npm/dm/rn-placeholder.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarmad1995%2Freact-native-easy-content-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarmad1995%2Freact-native-easy-content-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarmad1995%2Freact-native-easy-content-loader/lists"}