Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nitin42/react-color-extractor
A React component which extracts colors from an image
https://github.com/nitin42/react-color-extractor
colors converter hex hsl image react rgb
Last synced: about 17 hours ago
JSON representation
A React component which extracts colors from an image
- Host: GitHub
- URL: https://github.com/nitin42/react-color-extractor
- Owner: nitin42
- Created: 2018-08-26T13:02:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-29T14:50:23.000Z (about 6 years ago)
- Last Synced: 2024-11-14T03:03:32.764Z (2 days ago)
- Topics: colors, converter, hex, hsl, image, react, rgb
- Language: JavaScript
- Homepage: https://react-color-extractor.surge.sh/
- Size: 41.1 MB
- Stars: 373
- Watchers: 7
- Forks: 32
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-color-extractor
## What
`react-color-extractor` is a React component that extracts colors from an image.
## Motivation
This 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.
## Use cases
- Design systems
- Creative coding
- Creating advanced color tools
## Install
```
npm install react-color-extractor
```
or if you use `yarn`
```
yarn add react-color-extractor
```
**This package also depends on React, so make sure you've it installed.**
## Example
```js
import React from 'react'
import { ColorExtractor } from 'react-color-extractor'
class App extends React.Component {
state = { colors: [] }
renderSwatches = () => {
const { colors } = this.state
return colors.map((color, id) => {
return (
)
})
}
getColors = colors =>
this.setState(state => ({ colors: [...state.colors, ...colors] }))
render() {
return (
{this.renderSwatches()}
)
}
}
```
Checkout the demo on CodeSandbox
[](https://codesandbox.io/s/k3wj33kzw3)
## Examples
Check out the [`examples`](./examples) folder.
## Usage
`react-color-extractor` can be used in two different ways.
- **With image element as children**
```js
console.log(colors)}>
```
Check out [this](./examples/WithChildren.js) example.
- **Passing a local or remote image, or a blob url via `src` prop**
```js
console.log(colors)}
/>
```
Check out [this](./examples/WithSrc.js) example.
## Using remote images
In 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.
## API
### `` props
#### `getColors`
**`(colors: Array | string>) => void`**
`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
```js
this.setState({ colors: colors })} />
```
#### `rgb`
**`type: boolean`**
When set to `true`, produces the color in `rgb` format. By default, colors produced are in hex format
```js
console.log(colors)} />
```
This will log colors in `rgb` format
#### `onError`
**`(error: Object) => void`**
`onError` callback is invoked if there is any issue with processing the image.
```js
this.setState({ hasError: true , msg: error })}>
```
#### `src`
**`type: string`**
`src` prop accepts a remote or local image url, or a blob url.
```js
console.log(colors)}
/>
```
#### `maxColors`
**`type: number`**
`maxColors` prop accepts a number for amount of colors in palette from which swatches will be generated.
```js
...} maxColors={128} />
```
## Contributing
If you like to contribute to this project, then follow the below instructions to setup the project locally on your machine.
```
git clone https://github.com//react-color-extractor
cd react-color-extractor
yarn
```
### Type checking
Run flow type checker using `yarn flow`
### Building the source code
Run `yarn build:component` to build the source code.
## TODO
- [ ] Add quantizers