All Projects β†’ pradeep1991singh β†’ react-native-image-color-picker

pradeep1991singh / react-native-image-color-picker

Licence: ISC license
Image color picker based on image source provided and return image different color palettes or average color palette

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-image-color-picker

Colors App
🎨 A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
Stars: ✭ 90 (+260%)
Mutual labels:  color, color-picker, color-palette
Leonardo
Generate colors based on a desired contrast ratio
Stars: ✭ 973 (+3792%)
Mutual labels:  color, color-picker, color-palette
react-native-color-panel
React Native Color Panel Component for iOS and Android πŸ³οΈβ€πŸŒˆ
Stars: ✭ 21 (-16%)
Mutual labels:  color, color-picker, color-palette
SwiftColorWheel
Delightful color picker wheel for iOS in Swift.
Stars: ✭ 37 (+48%)
Mutual labels:  color, color-picker, color-palette
Colorpicker
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
Stars: ✭ 271 (+984%)
Mutual labels:  color, color-picker, color-palette
Chromacolorpicker
🎨 An intuitive iOS color picker built in Swift.
Stars: ✭ 434 (+1636%)
Mutual labels:  color, color-picker, color-palette
Colorbook
🎨 Color schemes for UI design - Optimized for foreground, background, border, etc. https://liyasthomas.github.io/colorbook
Stars: ✭ 148 (+492%)
Mutual labels:  color, color-picker, color-palette
pantone-colors
Hex values of all 2310 Pantone colors
Stars: ✭ 147 (+488%)
Mutual labels:  color, color-picker, color-palette
javascript-color-gradient
Lightweight JavaScript library, used to generate an array of color gradients, between start and finish colors.
Stars: ✭ 54 (+116%)
Mutual labels:  color, color-picker, color-palette
Pickr
🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
Stars: ✭ 3,759 (+14936%)
Mutual labels:  color, color-picker, color-palette
Kallewheel
A custom color wheel extension for Adobe Photoshop
Stars: ✭ 16 (-36%)
Mutual labels:  color, color-picker, color-palette
Colorschemes.jl
colorschemes, colormaps, gradients, and palettes
Stars: ✭ 55 (+120%)
Mutual labels:  color, color-palette
Iconhandler
Tint you Icons, change the size, apply alpha color and set a position easily. πŸ‘“
Stars: ✭ 59 (+136%)
Mutual labels:  color, color-palette
Colorpickerwpf
Simple color picker control for WPF
Stars: ✭ 71 (+184%)
Mutual labels:  color, color-picker
Materialdesigncolor
This project shows the color in material design
Stars: ✭ 55 (+120%)
Mutual labels:  color, color-palette
Gvcci
color extraction to turn images into 16 color palettes
Stars: ✭ 86 (+244%)
Mutual labels:  color, color-palette
Bootstrap Colorpicker
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
Stars: ✭ 1,351 (+5304%)
Mutual labels:  color, color-picker
Pikolo
An android color picker library
Stars: ✭ 142 (+468%)
Mutual labels:  color, color-picker
Colorwanted
Screen color picker for Windows (Windows δΈŠηš„ε±εΉ•ε–θ‰²ε™¨)
Stars: ✭ 105 (+320%)
Mutual labels:  color, color-picker
React Native Color
Color components for React Native 🌈
Stars: ✭ 178 (+612%)
Mutual labels:  color, color-picker

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

$ npm install react-native-image-color-picker --save

or

$ yarn add react-native-image-color-picker --save

and

$ react-native link image-color-picker #(for android)

Usage

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

Demo

Demo

TODO

  • Support Image picker gallery

Contributing

Interested in contributing to this repository? PR are most welcome!


Buy Me A Coffee

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].