{"id":13674643,"url":"https://github.com/jeffersonlicet/use-image-color","last_synced_at":"2025-04-09T22:18:52.598Z","repository":{"id":38849733,"uuid":"283790137","full_name":"jeffersonlicet/use-image-color","owner":"jeffersonlicet","description":"🎨 A hook to grab a color palette from images. Render a skeleton color while your original image still loading.","archived":false,"fork":false,"pushed_at":"2023-03-03T11:26:44.000Z","size":2981,"stargazers_count":264,"open_issues_count":14,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T22:18:48.868Z","etag":null,"topics":["hook","image","palette","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jeffersonlicet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-30T13:57:51.000Z","updated_at":"2024-12-08T09:36:57.000Z","dependencies_parsed_at":"2024-10-31T08:03:02.257Z","dependency_job_id":"0ad3cc2f-a593-46c7-8ea3-3e36f1b6a021","html_url":"https://github.com/jeffersonlicet/use-image-color","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/jeffersonlicet%2Fuse-image-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffersonlicet%2Fuse-image-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffersonlicet%2Fuse-image-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffersonlicet%2Fuse-image-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffersonlicet","download_url":"https://codeload.github.com/jeffersonlicet/use-image-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119284,"owners_count":21050755,"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":["hook","image","palette","react","reactjs"],"created_at":"2024-08-02T11:00:55.853Z","updated_at":"2025-04-09T22:18:52.576Z","avatar_url":"https://github.com/jeffersonlicet.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# useImageColor\nGrab color palette from any image using this hook\n\n\u003cp align=\"center\"\u003e\n      \u003ca href=\"https://img.shields.io/npm/dt/use-image-color?style=flat-square\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/use-image-color?style=flat-square\"?\u003c/a\u003e\n  \u003ca href=\"https://badges.pufler.dev/visits/jeffersonlicet/use-image-color\"\u003e\u003cimg src=\"https://badges.pufler.dev/visits/jeffersonlicet/use-image-color\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/use-image-color\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/use-image-color?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=use-image-color@0.0.7\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/min/use-image-color?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n![Example](https://i.postimg.cc/QCTjJ26r/a-min.png)\n\n## How does it work?\nIt renders your image on a canvas and then generates its palette of colors using color quantization.\n\n### Includes Image Component\nThis image component renders a placeholder color while your original images are loading.\n\n**Before loading big images (color from smaller images)**\n![Before loading](https://i.postimg.cc/QN27ZhZ1/b.png)\n\n**After loading big images:**\n![After loading](https://i.postimg.cc/BngPFFLB/c.png)\n\n## Live Sandbox demo:\n[Live Sandbox Demo](https://codesandbox.io/s/great-glade-sldoe?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n![](https://i.imgur.com/eS1AD26.png)\n\n## How does this image component work?\nYou must provide src (your original image) and a thumbnail (smaller image).\nAs soon as the thumbnail is loaded the skeleton becomes visible using its dominant color. In the meantime, your original image continues loading, finally, when your original image arrives, it replaces the skeleton.\n\n# Installation:\n`npm install use-image-color`\n\n# The hook:\n## Usage:\n```javascript\nimport useImageColor from 'use-image-color'\n\nexport function Card() {\n  const { colors } = useImageColor(url, { cors: true, colors: 5 })\n  return (...);\n}\n```\n\n## Hook params:\n```javascript\nuseImageColor(url: String, options: OptionsObject)\n```\n| param      | description                                            | default |\n|------------|--------------------------------------------------------|---------|\n| cors       | Use CORS. Enable this if you are using external images | false   |\n| colors     | Number of colors to grab                               | 5       |\n| format     | Output format: rgb or hex                              | hex     |\n| windowSize | Size of window to grab pixels, low values are faster   | 50      |\n\n# The component:\n## Usage:\n```javascript\nimport { Image } from 'use-image-color'\n\nexport function Card() {\n  return (\n    \u003cImage src={url} thumbnail={thumbnail} /\u003e\n  );\n}\n```\n\n## Component params:\n| param      | description                                            | required |\n|------------|--------------------------------------------------------|---------|\n| thumbnail  | Small version of your image  | true   |\n| src     | Original version of your image | true       |\n| wrapperStyle     | Style object to apply to the wrapper of the image and the color | false       |\n| wrapperClass     | Class to apply to the wrapper of the image and the color | false       |\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffersonlicet%2Fuse-image-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffersonlicet%2Fuse-image-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffersonlicet%2Fuse-image-color/lists"}