{"_id":"@b.taranenko/expo-color-thief","_rev":"2-f581714e3e16ec97e8b78fe8557a252c","name":"@b.taranenko/expo-color-thief","dist-tags":{"latest":"0.0.1"},"versions":{"1.0.0":{"name":"@b.taranenko/expo-color-thief","version":"1.0.0","keywords":["expo","react-native","color-thief","color-extraction","dominant-color","color-palette","image-processing"],"author":{"name":"Kazuki Ohara","email":"kazuki.ohara@gmail.com"},"license":"MIT","_id":"@b.taranenko/expo-color-thief@1.0.0","maintainers":[{"name":"b.taranenko","email":"bogdan13taranenko@gmail.com"}],"homepage":"https://github.com/yamoridon/ColorThiefSwift/tree/master/expo-color-thief","bugs":{"url":"https://github.com/yamoridon/ColorThiefSwift/issues"},"dist":{"shasum":"f1a4b57d038fb5ade87669102c863049b2cf4c16","tarball":"https://registry.npmjs.org/@b.taranenko/expo-color-thief/-/expo-color-thief-1.0.0.tgz","fileCount":23,"integrity":"sha512-9rDuIJiCz458WsStbgh2sy2FCSG6hhGhaXLWQNfTAgDn4T5VZ8Vl9EQW9yzksEbSUglqI6hRKFmR3bn4Zsx+CA==","signatures":[{"sig":"MEUCIFFVk9++6jUSAn850SWyJsdTdn6l25lzt0AWzR/kV6/sAiEAmKSuWL/jZ1pxd/1DuDt9fRu/WCGE3ncxRTtup3ooOlk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":68177},"main":"build/index.js","types":"build/index.d.ts","gitHead":"ac04a95acca965f8030a01293c31621b2a812c39","scripts":{"lint":"expo-module lint","test":"expo-module test","build":"expo-module build","clean":"expo-module clean","prepare":"expo-module prepare","expo-module":"expo-module","prepublishOnly":"expo-module prepublishOnly"},"_npmUser":{"name":"b.taranenko","email":"bogdan13taranenko@gmail.com"},"repository":{"url":"git+https://github.com/yamoridon/ColorThiefSwift.git","type":"git","directory":"expo-color-thief"},"_npmVersion":"10.9.2","description":"Expo module for extracting dominant colors from images using ColorThief algorithm","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"expo":"~53.0.0","@types/react":"~19.0.0","react-native":"0.79.1","expo-module-scripts":"^4.1.10"},"peerDependencies":{"expo":"*","react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/expo-color-thief_1.0.0_1764603217946_0.18622175006362052","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@b.taranenko/expo-color-thief","version":"0.0.1","description":"Expo module for extracting dominant colors from images using ColorThief algorithm","main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"keywords":["expo","react-native","color-thief","color-extraction","dominant-color","color-palette","image-processing"],"repository":{"type":"git","url":"git+https://github.com/BogdanTaranenko/expo-color-thief.git","directory":"expo-color-thief"},"bugs":{"url":"https://github.com/BogdanTaranenko/expo-color-thief/issues"},"author":{"name":"Bogdan Taranenko","email":"bogdan@taranenko.io"},"license":"MIT","homepage":"https://github.com/BogdanTaranenko/expo-color-thief","peerDependencies":{"expo":"*","react":"*","react-native":"*"},"devDependencies":{"@types/react":"~19.0.0","expo-module-scripts":"^4.1.10","expo":"~53.0.0","react-native":"0.79.1"},"_id":"@b.taranenko/expo-color-thief@0.0.1","gitHead":"cca70f6a24c848b1fd79503dd8f36cb8c758c757","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-IsWRs61RNULAS6PDj//amkmJAOY2hWE8/TYFwvxPSySUUtjXFVIxqyriipuibp6ajJ1vShrdy+dS36XLBFVZEA==","shasum":"aa78107f230d842f99eb25e350f43f9658360c34","tarball":"https://registry.npmjs.org/@b.taranenko/expo-color-thief/-/expo-color-thief-0.0.1.tgz","fileCount":23,"unpackedSize":68092,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEPgw7wu0wpIO8XhnoA6LJNWemhaDPSXbI2uyQ9qRL2fAiBO2/eLDB451Ws3i/GJYWYGKIKRsGKdRrtaSQBg7F6xew=="}]},"_npmUser":{"name":"b.taranenko","email":"bogdan13taranenko@gmail.com"},"directories":{},"maintainers":[{"name":"b.taranenko","email":"bogdan13taranenko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/expo-color-thief_0.0.1_1771407212458_0.6350736397505254"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-01T15:33:37.867Z","modified":"2026-02-18T09:33:32.719Z","1.0.0":"2025-12-01T15:33:38.120Z","0.0.1":"2026-02-18T09:33:32.601Z"},"bugs":{"url":"https://github.com/BogdanTaranenko/expo-color-thief/issues"},"author":{"name":"Bogdan Taranenko","email":"bogdan@taranenko.io"},"license":"MIT","homepage":"https://github.com/BogdanTaranenko/expo-color-thief","keywords":["expo","react-native","color-thief","color-extraction","dominant-color","color-palette","image-processing"],"repository":{"type":"git","url":"git+https://github.com/BogdanTaranenko/expo-color-thief.git","directory":"expo-color-thief"},"description":"Expo module for extracting dominant colors from images using ColorThief algorithm","maintainers":[{"name":"b.taranenko","email":"bogdan13taranenko@gmail.com"}],"readme":"# expo-color-thief\n\nAn Expo module for extracting dominant colors from images using the ColorThief algorithm (MMCQ - Modified Median Cut Quantization).\n\nBased on [ColorThiefSwift](https://github.com/yamoridon/ColorThiefSwift) by Kazuki Ohara and the original [Color Thief](http://lokeshdhakar.com/projects/color-thief/) by Lokesh Dhakar.\n\n## Installation\n\n```bash\nnpx expo install expo-color-thief\n```\n\nOr with npm/yarn:\n\n```bash\nnpm install expo-color-thief\n# or\nyarn add expo-color-thief\n```\n\nThen rebuild your native app:\n\n```bash\nnpx expo prebuild\nnpx expo run:ios\n# or\nnpx expo run:android\n```\n\n## Usage\n\n### Get Dominant Color\n\n```typescript\nimport { getColor } from 'expo-color-thief';\n\n// From a URL\nconst color = await getColor('https://example.com/image.jpg');\nconsole.log(color?.hex);  // '#ff5733'\nconsole.log(color?.rgb);  // { r: 255, g: 87, b: 51 }\n\n// From a local file\nconst color = await getColor('file:///path/to/image.jpg');\n\n// With options\nconst color = await getColor(imageUri, {\n  quality: 5,        // 1-10, lower = better quality but slower\n  ignoreWhite: true  // ignore white pixels\n});\n```\n\n### Get Color Palette\n\n```typescript\nimport { getPalette } from 'expo-color-thief';\n\n// Get 5 colors (default)\nconst palette = await getPalette('https://example.com/image.jpg');\n\n// Get 8 colors with custom quality\nconst palette = await getPalette(imageUri, {\n  colorCount: 8,\n  quality: 5,\n  ignoreWhite: true\n});\n\n// Use the palette\npalette?.forEach(color => {\n  console.log(color.hex);\n  // '#ff5733', '#3498db', '#2ecc71', ...\n});\n```\n\n### Utility Functions\n\n```typescript\nimport { rgbToHex, hexToRgb } from 'expo-color-thief';\n\n// Convert RGB to Hex\nconst hex = rgbToHex({ r: 255, g: 87, b: 51 });\n// '#ff5733'\n\n// Convert Hex to RGB\nconst rgb = hexToRgb('#ff5733');\n// { r: 255, g: 87, b: 51 }\n```\n\n## API Reference\n\n### `getColor(imageUri, options?)`\n\nExtract the dominant color from an image.\n\n**Parameters:**\n- `imageUri` (string): URI of the image (http://, https://, file://, or data:)\n- `options` (optional):\n  - `quality` (number): 1-10, lower is better quality but slower. Default: 10\n  - `ignoreWhite` (boolean): Skip white pixels. Default: true\n\n**Returns:** `Promise<ColorResult | null>`\n\n### `getPalette(imageUri, options?)`\n\nExtract a color palette from an image.\n\n**Parameters:**\n- `imageUri` (string): URI of the image\n- `options` (optional):\n  - `colorCount` (number): Number of colors to extract. Default: 5\n  - `quality` (number): 1-10, lower is better quality but slower. Default: 10\n  - `ignoreWhite` (boolean): Skip white pixels. Default: true\n\n**Returns:** `Promise<ColorResult[] | null>`\n\n### Types\n\n```typescript\ninterface RGB {\n  r: number;\n  g: number;\n  b: number;\n}\n\ninterface ColorResult {\n  rgb: RGB;\n  hex: string;\n}\n```\n\n## Supported Image Sources\n\n- **Remote URLs**: `https://example.com/image.jpg`\n- **Local files**: `file:///path/to/image.jpg`\n- **Base64 data URIs**: `data:image/png;base64,...`\n- **Bundle resources** (iOS): Image name from asset catalog\n\n## Example App\n\n```typescript\nimport React, { useState, useEffect } from 'react';\nimport { View, Image, Text, StyleSheet } from 'react-native';\nimport { getColor, getPalette, ColorResult } from 'expo-color-thief';\n\nconst IMAGE_URL = 'https://picsum.photos/400/300';\n\nexport default function App() {\n  const [dominantColor, setDominantColor] = useState<ColorResult | null>(null);\n  const [palette, setPalette] = useState<ColorResult[] | null>(null);\n\n  useEffect(() => {\n    async function extractColors() {\n      const color = await getColor(IMAGE_URL);\n      setDominantColor(color);\n\n      const colors = await getPalette(IMAGE_URL, { colorCount: 6 });\n      setPalette(colors);\n    }\n    extractColors();\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <Image source={{ uri: IMAGE_URL }} style={styles.image} />\n\n      {dominantColor && (\n        <View style={styles.section}>\n          <Text style={styles.title}>Dominant Color</Text>\n          <View\n            style={[styles.colorBox, { backgroundColor: dominantColor.hex }]}\n          />\n          <Text>{dominantColor.hex}</Text>\n        </View>\n      )}\n\n      {palette && (\n        <View style={styles.section}>\n          <Text style={styles.title}>Palette</Text>\n          <View style={styles.paletteContainer}>\n            {palette.map((color, index) => (\n              <View key={index} style={styles.paletteItem}>\n                <View\n                  style={[styles.colorBox, { backgroundColor: color.hex }]}\n                />\n                <Text style={styles.hexText}>{color.hex}</Text>\n              </View>\n            ))}\n          </View>\n        </View>\n      )}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    backgroundColor: '#fff',\n  },\n  image: {\n    width: '100%',\n    height: 200,\n    borderRadius: 8,\n  },\n  section: {\n    marginTop: 20,\n  },\n  title: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  colorBox: {\n    width: 50,\n    height: 50,\n    borderRadius: 4,\n    borderWidth: 1,\n    borderColor: '#ddd',\n  },\n  paletteContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    gap: 10,\n  },\n  paletteItem: {\n    alignItems: 'center',\n  },\n  hexText: {\n    fontSize: 10,\n    marginTop: 4,\n  },\n});\n```\n\n## Performance Tips\n\n1. **Quality setting**: Use higher values (5-10) for large images to improve speed\n2. **Image size**: Consider resizing large images before extraction\n3. **Caching**: Cache results if analyzing the same image multiple times\n4. **Color count**: Request only as many colors as you need\n\n## Credits\n\n- [ColorThiefSwift](https://github.com/yamoridon/ColorThiefSwift) by Kazuki Ohara\n- [Color Thief](http://lokeshdhakar.com/projects/color-thief/) by Lokesh Dhakar\n- [color-thief-java](https://github.com/SvenWoltmann/color-thief-java) by Sven Woltmann","readmeFilename":"README.md"}