{"_id":"@danielsledz/react-native-skeleton-placeholder","_rev":"3-0048e14d9a4bce7bfffb2a081bb28ba3","name":"@danielsledz/react-native-skeleton-placeholder","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@danielsledz/react-native-skeleton-placeholder","version":"1.0.0","keywords":["react-native","skeleton","placeholder","typescript","skeleton-loader","shimmer","loading","ui"],"author":{"name":"Daniel Śledź"},"license":"MIT","_id":"@danielsledz/react-native-skeleton-placeholder@1.0.0","maintainers":[{"name":"danielsledz","email":"danielsledz2003@gmail.com"}],"homepage":"https://github.com/danielsledz/react-native-skeleton-placeholder#readme","bugs":{"url":"https://github.com/danielsledz/react-native-skeleton-placeholder/issues"},"dist":{"shasum":"20fab07dcb4d4c414ed322d2d51b7539e3a13b3d","tarball":"https://registry.npmjs.org/@danielsledz/react-native-skeleton-placeholder/-/react-native-skeleton-placeholder-1.0.0.tgz","fileCount":8,"integrity":"sha512-JaPFSIlVDTBPZ/t2Qh+z7JbB3nwWJHeWJ6pmb2PSdSE90xKOSt8TUhu19agExGv4j2i6a6r4XfxNs41lpaakTg==","signatures":[{"sig":"MEYCIQCC8l3uYcQmlUGoEDdSDtG//zdSN05sa2fORCO1SuzOSgIhALptGhjdV4fivxVvoYDrvqg/7XnrReMiB4z63NI974//","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":181903},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=16.0.0"},"scripts":{"test":"node ./node_modules/.bin/jest","build":"node ./node_modules/.bin/rollup -c","clean":"rm -rf dist","typecheck":"tsc --noEmit","test:watch":"node ./node_modules/.bin/jest --watch","build:types":"tsc --emitDeclarationOnly","test:coverage":"node ./node_modules/.bin/jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"danielsledz","email":"danielsledz2003@gmail.com"},"repository":{"url":"git+https://github.com/danielsledz/react-native-skeleton-placeholder.git","type":"git"},"_npmVersion":"11.4.1","description":"Fork of react-native-skeleton-placeholder with TypeScript support and improvements","directories":{},"_nodeVersion":"22.15.0","dependencies":{"react-native-linear-gradient":"^2.8.3","@react-native-masked-view/masked-view":"^0.3.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tslib":"^2.8.1","rollup":"^4.0.0","ts-jest":"^29.1.1","typescript":"^5.8.3","@types/jest":"^29.5.14","@types/react":"^19.1.8","react-native-web":"^0.20.0","rollup-plugin-dts":"^6.0.0","@types/react-native":"^0.72.8","react-test-renderer":"^19.1.0","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@types/react-test-renderer":"^19.1.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.63.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-skeleton-placeholder_1.0.0_1749879202863_0.10227763003340651","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@danielsledz/react-native-skeleton-placeholder","version":"1.0.1","keywords":["react-native","skeleton","placeholder","typescript","skeleton-loader","shimmer","loading","ui"],"author":{"name":"Daniel Śledź"},"license":"MIT","_id":"@danielsledz/react-native-skeleton-placeholder@1.0.1","maintainers":[{"name":"danielsledz","email":"danielsledz2003@gmail.com"}],"homepage":"https://github.com/danielsledz/react-native-skeleton-placeholder#readme","bugs":{"url":"https://github.com/danielsledz/react-native-skeleton-placeholder/issues"},"dist":{"shasum":"262ff90a95d20218f7b4d5dde8ef3d52410d6f91","tarball":"https://registry.npmjs.org/@danielsledz/react-native-skeleton-placeholder/-/react-native-skeleton-placeholder-1.0.1.tgz","fileCount":8,"integrity":"sha512-2G5gYl+NjtBMav4sW7JuHav+RiS1UG0/nuYpg2E1v7/MeK5R7zW+ZD2z+QSI/63dhu36BzpZWCjHXkyQOj1r1A==","signatures":[{"sig":"MEUCIH989LPeL7i+HgNavkKBKZdvDcRLSV/MvhRBVdz9gi5JAiEAvnCO2TZnQMT4buN0NszA2j1btyzBqEg3+BFTZ4odz5k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":181760},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=16.0.0"},"scripts":{"test":"node ./node_modules/.bin/jest","build":"node ./node_modules/.bin/rollup -c","clean":"rm -rf dist","typecheck":"tsc --noEmit","test:watch":"node ./node_modules/.bin/jest --watch","build:types":"tsc --emitDeclarationOnly","test:coverage":"node ./node_modules/.bin/jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"danielsledz","email":"danielsledz2003@gmail.com"},"repository":{"url":"git+https://github.com/danielsledz/react-native-skeleton-placeholder.git","type":"git"},"_npmVersion":"11.4.1","description":"Fork of react-native-skeleton-placeholder with TypeScript support and improvements","directories":{},"_nodeVersion":"22.15.0","dependencies":{"react-native-linear-gradient":"^2.8.3","@react-native-masked-view/masked-view":"^0.3.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tslib":"^2.8.1","rollup":"^4.0.0","ts-jest":"^29.1.1","typescript":"^5.8.3","@types/jest":"^29.5.14","@types/react":"^19.1.8","react-native-web":"^0.20.0","rollup-plugin-dts":"^6.0.0","@types/react-native":"^0.72.8","react-test-renderer":"^19.1.0","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@types/react-test-renderer":"^19.1.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.63.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-skeleton-placeholder_1.0.1_1749879525344_0.04913501744148263","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@danielsledz/react-native-skeleton-placeholder","version":"1.0.2","description":"Fork of react-native-skeleton-placeholder with TypeScript support and improvements","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/DanielSledz03/react-native-skeleton-placeholder.git"},"homepage":"https://github.com/DanielSledz03/react-native-skeleton-placeholder#readme","bugs":{"url":"https://github.com/DanielSledz03/react-native-skeleton-placeholder/issues"},"author":{"name":"Daniel Śledź"},"license":"MIT","keywords":["react-native","skeleton","placeholder","typescript","skeleton-loader","shimmer","loading","ui"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.63.0"},"dependencies":{"@react-native-masked-view/masked-view":"^0.3.2","react-native-linear-gradient":"^2.8.3"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@types/jest":"^29.5.14","@types/react":"^19.1.8","@types/react-native":"^0.72.8","@types/react-test-renderer":"^19.1.0","jest":"^29.7.0","react-native-web":"^0.20.0","react-test-renderer":"^19.1.0","rollup":"^4.0.0","rollup-plugin-dts":"^6.0.0","ts-jest":"^29.1.1","tslib":"^2.8.1","typescript":"^5.8.3"},"scripts":{"build":"node ./node_modules/.bin/rollup -c","build:types":"tsc --emitDeclarationOnly","prepublishOnly":"npm run build","clean":"rm -rf dist","test":"node ./node_modules/.bin/jest","test:watch":"node ./node_modules/.bin/jest --watch","test:coverage":"node ./node_modules/.bin/jest --coverage","typecheck":"tsc --noEmit"},"engines":{"node":">=16.0.0"},"_id":"@danielsledz/react-native-skeleton-placeholder@1.0.2","gitHead":"b864ab3b352c0424cc3fa5fc6637471fc0104235","_nodeVersion":"22.15.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-sUv2OZ42hp8YPwyvIw+yADYqxiVniDu+4OgecMOmXcOp8B7gIh8TMsJJHdCta0M4bMX0UcdH/IDd4ipCpfrdAA==","shasum":"baf6669953619a5a138451cf2c5f49a7aa6d024b","tarball":"https://registry.npmjs.org/@danielsledz/react-native-skeleton-placeholder/-/react-native-skeleton-placeholder-1.0.2.tgz","fileCount":8,"unpackedSize":181760,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCjCJABIJ8CSlyfS0pmvQ/qTS/VrMC6ji+Obj4DT8XDcgIhAK3Vnmibk7C+MElvLTvAhRmGNzoIk0DW1YFMNT/Ve6X+"}]},"_npmUser":{"name":"danielsledz","email":"danielsledz2003@gmail.com"},"directories":{},"maintainers":[{"name":"danielsledz","email":"danielsledz2003@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-skeleton-placeholder_1.0.2_1749881798093_0.4046827199892207"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-14T05:33:22.805Z","modified":"2025-06-14T06:16:38.478Z","1.0.0":"2025-06-14T05:33:23.078Z","1.0.1":"2025-06-14T05:38:45.534Z","1.0.2":"2025-06-14T06:16:38.305Z"},"bugs":{"url":"https://github.com/DanielSledz03/react-native-skeleton-placeholder/issues"},"author":{"name":"Daniel Śledź"},"license":"MIT","homepage":"https://github.com/DanielSledz03/react-native-skeleton-placeholder#readme","keywords":["react-native","skeleton","placeholder","typescript","skeleton-loader","shimmer","loading","ui"],"repository":{"type":"git","url":"git+https://github.com/DanielSledz03/react-native-skeleton-placeholder.git"},"description":"Fork of react-native-skeleton-placeholder with TypeScript support and improvements","maintainers":[{"name":"danielsledz","email":"danielsledz2003@gmail.com"}],"readme":"# @danielsledz/react-native-skeleton-placeholder\n\n[![npm version](https://img.shields.io/npm/v/@danielsledz/react-native-skeleton-placeholder.svg)](https://github.com/DanielSledz03/react-native-skeleton-placeholder)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n> 🧪 Fork of [react-native-skeleton-placeholder](https://github.com/chramos/react-native-skeleton-placeholder), rewritten in TypeScript with improvements.\n\n## 🚀 Features\n\n- ✅ Full TypeScript support\n- ✅ Improved performance\n- ✅ Customizable animation\n- ✅ Shimmer effect\n- ✅ Easy to use API\n- ✅ React Native 0.63+ compatible\n\n## 📦 Installation\n\n```bash\nnpm install @danielsledz/react-native-skeleton-placeholder\n# or\nyarn add @danielsledz/react-native-skeleton-placeholder\n```\n\n## 📋 Prerequisites\n\nThis library requires the following peer dependencies:\n\n```bash\nnpm install @react-native-masked-view/masked-view react-native-linear-gradient\n# or\nyarn add @react-native-masked-view/masked-view react-native-linear-gradient\n```\n\n## 🎯 Usage (Quick Example)\n\n```tsx\nimport React from \"react\";\nimport { View, Text } from \"react-native\";\nimport { SkeletonPlaceholder } from \"@danielsledz/react-native-skeleton-placeholder\";\n\nconst MyComponent = () => {\n  const [isLoading, setIsLoading] = React.useState(true);\n\n  if (isLoading) {\n    return (\n      <SkeletonPlaceholder>\n        <View style={{ flexDirection: \"row\", alignItems: \"center\" }}>\n          <View style={{ width: 60, height: 60, borderRadius: 50 }} />\n          <View style={{ marginLeft: 20 }}>\n            <View style={{ width: 120, height: 20, borderRadius: 4 }} />\n            <View\n              style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}\n            />\n          </View>\n        </View>\n      </SkeletonPlaceholder>\n    );\n  }\n\n  return (\n    <View>\n      <Text>Your actual content here</Text>\n    </View>\n  );\n};\n```\n\n### Using SkeletonPlaceholder.Item\n\n```tsx\nimport React from \"react\";\nimport { View } from \"react-native\";\nimport { SkeletonPlaceholder } from \"@danielsledz/react-native-skeleton-placeholder\";\n\nconst MyComponent = () => {\n  return (\n    <SkeletonPlaceholder>\n      <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />\n      <SkeletonPlaceholder.Item width={120} height={20} borderRadius={4} />\n      <SkeletonPlaceholder.Item width={80} height={20} borderRadius={4} />\n    </SkeletonPlaceholder>\n  );\n};\n```\n\n### Custom Animation\n\n```tsx\nimport React from \"react\";\nimport { SkeletonPlaceholder } from \"@danielsledz/react-native-skeleton-placeholder\";\n\nconst MyComponent = () => {\n  return (\n    <SkeletonPlaceholder\n      backgroundColor=\"#E1E9EE\"\n      highlightColor=\"#F2F8FC\"\n      speed={1200}\n      direction=\"left\"\n      borderRadius={8}\n      shimmerWidth={100}\n    >\n      {/* Your skeleton content */}\n    </SkeletonPlaceholder>\n  );\n};\n```\n\n## 📚 API Reference\n\n### SkeletonPlaceholder Props\n\n| Prop              | Type                | Default     | Description                                    |\n| ----------------- | ------------------- | ----------- | ---------------------------------------------- |\n| `children`        | `React.ReactNode`   | -           | The content to render as skeleton              |\n| `backgroundColor` | `string`            | `\"#E1E9EE\"` | Background color of skeleton                   |\n| `highlightColor`  | `string`            | `\"#F2F8FC\"` | Highlight color for shimmer effect             |\n| `speed`           | `number`            | `800`       | Animation speed in milliseconds (0 to disable) |\n| `direction`       | `\"left\" \\| \"right\"` | `\"right\"`   | Animation direction                            |\n| `enabled`         | `boolean`           | `true`      | Enable/disable skeleton                        |\n| `borderRadius`    | `number`            | -           | Default border radius for all items            |\n| `shimmerWidth`    | `number`            | -           | Width of the shimmer highlight                 |\n\n### SkeletonPlaceholder.Item Props\n\n`SkeletonPlaceholder.Item` accepts all `ViewStyle` props plus:\n\n| Prop       | Type                   | Description       |\n| ---------- | ---------------------- | ----------------- |\n| `children` | `React.ReactNode`      | Optional children |\n| `style`    | `StyleProp<ViewStyle>` | Additional styles |\n\n## 🎨 Customization\n\n### Colors\n\nYou can customize the skeleton appearance by changing colors:\n\n```tsx\n<SkeletonPlaceholder backgroundColor=\"#f0f0f0\" highlightColor=\"#e0e0e0\">\n  {/* Content */}\n</SkeletonPlaceholder>\n```\n\n### Animation\n\nControl animation behavior:\n\n```tsx\n<SkeletonPlaceholder\n  speed={1000} // Slower animation\n  direction=\"left\" // Left-to-right animation\n  enabled={false} // Disable animation\n>\n  {/* Content */}\n</SkeletonPlaceholder>\n```\n\n## 🔧 Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the package\nnpm run build\n\n# Clean build artifacts\nnpm run clean\n\n# Type check only\nnpm run typecheck\n```\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!<br />\nFeel free to check [issues page](https://github.com/DanielSledz03/react-native-skeleton-placeholder/issues) or submit a pull request.\n\n1. Fork the repo\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nMIT © [Daniel Śledź](https://github.com/DanielSledz03)\n\n## 📝 Changelog\n\nSee full [Changelog](./CHANGELOG.md)\n","readmeFilename":"README.md"}