{"id":18862321,"url":"https://github.com/avrcoelho/react-native-skeleton-loader-pulse","last_synced_at":"2025-04-14T13:04:19.934Z","repository":{"id":42693130,"uuid":"259683364","full_name":"avrcoelho/react-native-skeleton-loader-pulse","owner":"avrcoelho","description":"Skeleton Loader Pulse for React Native","archived":false,"fork":false,"pushed_at":"2023-03-05T15:07:09.000Z","size":2628,"stargazers_count":13,"open_issues_count":20,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-19T09:18:35.873Z","etag":null,"topics":["component","loader","react","react-native","skeleton"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-skeleton-loader-pulse","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avrcoelho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"avrcoelho"}},"created_at":"2020-04-28T15:52:50.000Z","updated_at":"2023-04-04T11:34:07.000Z","dependencies_parsed_at":"2023-02-06T06:16:47.727Z","dependency_job_id":null,"html_url":"https://github.com/avrcoelho/react-native-skeleton-loader-pulse","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avrcoelho%2Freact-native-skeleton-loader-pulse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avrcoelho%2Freact-native-skeleton-loader-pulse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avrcoelho%2Freact-native-skeleton-loader-pulse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avrcoelho%2Freact-native-skeleton-loader-pulse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avrcoelho","download_url":"https://codeload.github.com/avrcoelho/react-native-skeleton-loader-pulse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223633897,"owners_count":17176864,"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":["component","loader","react","react-native","skeleton"],"created_at":"2024-11-08T04:33:58.978Z","updated_at":"2024-11-08T04:33:59.417Z","avatar_url":"https://github.com/avrcoelho.png","language":"TypeScript","funding_links":["https://github.com/sponsors/avrcoelho"],"categories":[],"sub_categories":[],"readme":"# React Native Skeleton Loader Pulse Component\n\nSkeleton Loader Pulse for React Native\n\n![Demo](demo.gif)\n\n## Install\n\n```shell\nnpm install react-native-skeleton-loader-pulse\n```\n\nou\n\n```shell\nyarn add react-native-skeleton-loader-pulse\n```\n\n## Usage\n\n### SkeletonItem\n\n```js\nimport React from \"react\";\nimport { SkeletonItem } from \"react-native-skeleton-loader-pulse\";\n\nexport default function Component() {\n  return \u003cSkeletonItem /\u003e;\n}\n```\n\n### Props\n\n| property     | propType                      | required | default | description                |\n| ------------ | ----------------------------- | -------- | ------- | -------------------------- |\n| color        | string \\| undefined           | \\-       | \\#ccc   | Skeleton color             |\n| pulseTime    | number \\| undefined           | \\-       | 1       | pulse time in seconds      |\n| width        | string \\| number \\| undefined | \\-       | 100%    | width container component  |\n| height       | string \\| number \\| undefined | \\-       | 10px    | height container component |\n| marginTop    | string \\| number \\| undefined | \\-       | 0       | margin top component       |\n| marginBottom | string \\| number \\| undefined | \\-       | 0       | margin bottom component    |\n| marginLeft   | string \\| number \\| undefined | \\-       | 0       | margin left component      |\n| marginRight  | string \\| number \\| undefined | \\-       | 0       | margin right component     |\n| borderRadius | number \\| undefined           | \\-       | 0       | border radius component    |\n\n### SkeletonLayout\n\n```js\nimport React from \"react\";\nimport { SkeletonLayout } from \"react-native-skeleton-loader-pulse\";\n\nexport default function Component() {\n  return (\n    \u003cSkeletonLayout\n      align=\"center\"\n      items={[\n        {\n          borderRadius: 50,\n          height: 100,\n          marginBottom: 15,\n          width: 100,\n        },\n        {\n          height: 25,\n          marginBottom: 10,\n          width: 250,\n        },\n        {\n          height: 10,\n          width: 270,\n        },\n        {\n          height: 10,\n          width: 300,\n        },\n        {\n          height: 10,\n          width: 280,\n        },\n      ]}\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| property  | propType                                   | required | default | description               |\n| --------- | ------------------------------------------ | -------- | ------- | ------------------------- |\n| color     | string \\| undefined                        | \\-       | \\#ccc   | Skeleton color            |\n| pulseTime | number \\| undefined                        | \\-       | 1       | pulse time                |\n| width     | string \\| number \\| undefined              | \\-       | 100%    | width container component |\n| direction | \"column\" \\| \"row\" \\| undefined             | \\-       | column  | flex\\-direction of layout |\n| align     | \"center\" \\| \"left\" \\| \"right\" \\| undefined | \\-       | left    | align items of layout     |\n| items     | Item\\[\\]                                   | yes      | \\-      | Layout: Array of objects  |\n|           |                                            |          |         |                           |\n\n### Props array Item\n\n| property     | propType                      | required | default | description   |\n| ------------ | ----------------------------- | -------- | ------- | ------------- |\n| height       | number \\| string              | yes      | \\-      | height        |\n| width        | number \\| string \\| undefined | \\-       | 100%    | widtt         |\n| borderRadius | number \\| undefined           | \\-       | 0       | border radius |\n| marginBottom | number \\| string \\| undefined | \\-       | 3px     | margin bottom |\n| marginTop    | number \\| string \\| undefined | \\-       | 3px     | margin top    |\n| marginLeft   | number \\| string \\| undefined | \\-       | 0       | margin left   |\n| marginRight  | number \\| string \\| undefined | \\-       | 0       | margin right  |\n\n## LICENSE\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\nDevelopment by: [André Coelho](https://andrecoelho.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favrcoelho%2Freact-native-skeleton-loader-pulse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favrcoelho%2Freact-native-skeleton-loader-pulse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favrcoelho%2Freact-native-skeleton-loader-pulse/lists"}