{"id":13474948,"url":"https://github.com/nitin42/react-color-extractor","last_synced_at":"2025-04-04T19:12:00.593Z","repository":{"id":57333029,"uuid":"146181081","full_name":"nitin42/react-color-extractor","owner":"nitin42","description":"A React component which extracts colors from an image","archived":false,"fork":false,"pushed_at":"2018-08-29T14:50:23.000Z","size":43104,"stargazers_count":375,"open_issues_count":9,"forks_count":32,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-23T09:37:57.681Z","etag":null,"topics":["colors","converter","hex","hsl","image","react","rgb"],"latest_commit_sha":null,"homepage":"https://react-color-extractor.surge.sh/","language":"JavaScript","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/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-26T13:02:49.000Z","updated_at":"2025-03-23T00:01:01.000Z","dependencies_parsed_at":"2022-08-26T03:10:51.612Z","dependency_job_id":null,"html_url":"https://github.com/nitin42/react-color-extractor","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/nitin42%2Freact-color-extractor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-color-extractor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-color-extractor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-color-extractor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/react-color-extractor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933435,"owners_count":20857048,"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":["colors","converter","hex","hsl","image","react","rgb"],"created_at":"2024-07-31T16:01:16.172Z","updated_at":"2025-04-04T19:12:00.573Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","*.js"],"sub_categories":["React"],"readme":"# react-color-extractor\n\n![size](https://img.shields.io/badge/size-2.8KB-green.svg)\n![version](https://img.shields.io/badge/version-1.1.2-green.svg)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/Demo.gif\" /\u003e\n\u003c/p\u003e\n\n## What\n\n`react-color-extractor` is a React component that extracts colors from an image.\n\n## Motivation\n\nThis is one of the tools that I am using in creative coding. I was learning color theory and wanted a React based library to extract a collection of swatches from an image. The extracted colors then can be used to create interesting gradient patterns, [loading designs](https://generative-design.surge.sh) with identical color scheme or crafting a symmetric color scheme across a system.\n\n## Use cases\n\n- Design systems\n\n- Creative coding\n\n- Creating advanced color tools\n\n## Install\n\n```\nnpm install react-color-extractor\n```\n\nor if you use `yarn`\n\n```\nyarn add react-color-extractor\n```\n\n**This package also depends on React, so make sure you've it installed.**\n\n## Example\n\n```js\nimport React from 'react'\nimport { ColorExtractor } from 'react-color-extractor'\n\nclass App extends React.Component {\n  state = { colors: [] }\n\n  renderSwatches = () =\u003e {\n    const { colors } = this.state\n\n    return colors.map((color, id) =\u003e {\n      return (\n        \u003cdiv\n          key={id}\n          style={{\n            backgroundColor: color,\n            width: 100,\n            height: 100\n          }}\n        /\u003e\n      )\n    })\n  }\n\n  getColors = colors =\u003e\n    this.setState(state =\u003e ({ colors: [...state.colors, ...colors] }))\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cColorExtractor getColors={this.getColors}\u003e\n          \u003cimg\n            src=\"https://i.imgur.com/OCyjHNF.jpg\"\n            style={{ width: 700, height: 500 }}\n          /\u003e\n        \u003c/ColorExtractor\u003e\n        \u003cdiv\n          style={{\n            marginTop: 20,\n            display: 'flex',\n            justifyContent: 'center'\n          }}\n        \u003e\n          {this.renderSwatches()}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nCheckout the demo on CodeSandbox\n\n[![Edit k3wj33kzw3](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k3wj33kzw3)\n\n## Examples\n\nCheck out the [`examples`](./examples) folder.\n\n## Usage\n\n`react-color-extractor` can be used in two different ways.\n\n- **With image element as children**\n\n```js\n\u003cColorExtractor getColors={colors =\u003e console.log(colors)}\u003e\n  \u003cimg src=\"...\" alt=\"...\" style={{...}} /\u003e\n\u003c/ColorExtractor\u003e\n```\n\nCheck out [this](./examples/WithChildren.js) example.\n\n- **Passing a local or remote image, or a blob url via `src` prop**\n\n```js\n\u003cColorExtractor\n  src=\"\u003clocal-or-remote-image-url-or-blob-url\u003e\"\n  getColors={colors =\u003e console.log(colors)}\n/\u003e\n```\n\nCheck out [this](./examples/WithSrc.js) example.\n\n## Using remote images\n\nIn development, make sure that you've configured proxy settings in your server config when you are using the remote images, otherwise you might run into [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issue. You can also use [this](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) chrome extension to tackle CORS issue.\n\n## API\n\n### `\u003cColorExtractor /\u003e` props\n\n#### `getColors`\n\n**`(colors: Array\u003cArray\u003cnumber\u003e | string\u003e) =\u003e void`**\n\n`getColors` callback is invoked with an array of colors, either in hex or rgb format once the image is done processing. Use this callback to update the state with the colors array\n\n```js\n\u003cColorExtractor getColors={colors =\u003e this.setState({ colors: colors })} /\u003e\n```\n\n#### `rgb`\n\n**`type: boolean`**\n\nWhen set to `true`, produces the color in `rgb` format. By default, colors produced are in hex format\n\n```js\n\u003cColorExtractor rgb getColors={colors =\u003e console.log(colors)} /\u003e\n```\n\nThis will log colors in `rgb` format\n\n#### `onError`\n\n**`(error: Object) =\u003e void`**\n\n`onError` callback is invoked if there is any issue with processing the image.\n\n```js\n\u003cColorExtractor onError={error =\u003e this.setState({ hasError: true , msg: error })}\u003e\n```\n\n#### `src`\n\n**`type: string`**\n\n`src` prop accepts a remote or local image url, or a blob url.\n\n```js\n\u003cColorExtractor\n  src=\"https://i.imgur.com/OCyjHNF.jpg\"\n  getColors={colors =\u003e console.log(colors)}\n/\u003e\n```\n\n#### `maxColors`\n\n**`type: number`**\n\n`maxColors` prop accepts a number for amount of colors in palette from which swatches will be generated.\n\n```js\n\u003cColorExtractor src=\"...\" getColors={colors =\u003e ...} maxColors={128} /\u003e\n```\n\n## Contributing\n\nIf you like to contribute to this project, then follow the below instructions to setup the project locally on your machine.\n\n```\ngit clone https://github.com/\u003cyour_username_here\u003e/react-color-extractor\n\ncd react-color-extractor\n\nyarn\n```\n\n### Type checking\n\nRun flow type checker using `yarn flow`\n\n### Building the source code\n\nRun `yarn build:component` to build the source code.\n\n## TODO\n\n- [ ] Add quantizers\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-color-extractor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Freact-color-extractor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-color-extractor/lists"}