react-native-image-color-picker
Version:
Image color picker based on image source provided and return image different color palettes or average color palette
70 lines (51 loc) • 1.98 kB
Markdown
# react-native-image-color-picker
Image color picker: Provide image source and it will return
- Different color palettes out of image
- Average color palette out of image
## Getting started
```sh
$ npm install react-native-image-color-picker --save
```
or
```sh
$ yarn add react-native-image-color-picker --save
```
## Usage
```jsx
import React, { Component } from 'react';
import { ImageColorPicker } from 'react-native-image-color-picker';
export default class App extends Component {
pickerCallback = message => {
if (message && message.nativeEvent && message.nativeEvent.data) {
console.log(message.nativeEvent.data); // response from ImageColorPicker
}
};
render() {
return (
....
<ImageColorPicker
imageUrl="https://dummyimage.com/100x100"
pickerCallback={this.pickerCallback}
/>
....
);
}
}
```
## Available Props/Options
- `imageUrl`: url of image
- `pickerCallback`: callback method for ImageColorPicker Success or Failure
- (optional)`imageType`: type of image e.g. jpeg, png `Default value: jpeg`
- (optional)`paletteType`: palette type e.g `average`: for average color of image, `dominant`: dominant colors in image `Default value: dominant`
- (optional)`paletteCount`: no of color palettes need e.g. 3 dominant color palette, applicable only in case of `paletteType: 'dominant'` `Default value: 3`
- (optional)`defaultPalette`: default color palette `Default value: [0, 0, 0, 1]`
- (optional)`colorType`: color code type e.g. rgba or hex `Default value: rgba`
- (optional)`pickerStyle`: picker container styles
- (optional)`imageWidth`: custom image width, other than natural
- (optional)`imageHeight`: custom image height, other than natural
## Example App
> [Example App](https://github.com/pradeep1991singh/ImageColorPickerExampleApp)
## TODO
- Support Image picker gallery
## Contributing
Interested in contributing to this repository? PR are most welcome!