All Projects → netbeast → React Native Color Wheel

netbeast / React Native Color Wheel

Licence: mit
🌈 A react native reusable and color picker wheel

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Color Wheel

javascript-color-gradient
Lightweight JavaScript library, used to generate an array of color gradients, between start and finish colors.
Stars: ✭ 54 (-60.58%)
Mutual labels:  color-picker, color-palette
Colorpicker
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
Stars: ✭ 271 (+97.81%)
Mutual labels:  color-picker, color-palette
epick
Color picker for creating harmonic color palettes that works on Linux, Windows, macOS and web.
Stars: ✭ 89 (-35.04%)
Mutual labels:  color-picker, color-palette
ColorPicker
Powerful screen ColorPicker/Chooser application for Linux Desktop
Stars: ✭ 55 (-59.85%)
Mutual labels:  color-picker, color-palette
Kallewheel
A custom color wheel extension for Adobe Photoshop
Stars: ✭ 16 (-88.32%)
Mutual labels:  color-picker, color-palette
tcolors
Commandline color picker and palette builder
Stars: ✭ 44 (-67.88%)
Mutual labels:  color-picker, color-palette
Egorozh.ColorPicker
🎨🎨🎨 Best of the best ColorPicker on WPF and AvaloniaUI
Stars: ✭ 39 (-71.53%)
Mutual labels:  color-picker, color-palette
react-native-image-color-picker
Image color picker based on image source provided and return image different color palettes or average color palette
Stars: ✭ 25 (-81.75%)
Mutual labels:  color-picker, color-palette
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+232.85%)
Mutual labels:  color-picker, color-palette
Chromacolorpicker
🎨 An intuitive iOS color picker built in Swift.
Stars: ✭ 434 (+216.79%)
Mutual labels:  color-picker, color-palette
vscode-color
Helper with GUI to generate color codes such as CSS color notations.
Stars: ✭ 88 (-35.77%)
Mutual labels:  color-picker, color-palette
Colors App
🎨 A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
Stars: ✭ 90 (-34.31%)
Mutual labels:  color-picker, color-palette
SwiftColorWheel
Delightful color picker wheel for iOS in Swift.
Stars: ✭ 37 (-72.99%)
Mutual labels:  color-picker, color-palette
pantone-colors
Hex values of all 2310 Pantone colors
Stars: ✭ 147 (+7.3%)
Mutual labels:  color-picker, color-palette
react-native-color-panel
React Native Color Panel Component for iOS and Android 🏳️‍🌈
Stars: ✭ 21 (-84.67%)
Mutual labels:  color-picker, color-palette
aframe-colorwheel-component
A-Frame Colorwheel. Based on A-Painter and A-Frame Material 🎨🅰
Stars: ✭ 16 (-88.32%)
Mutual labels:  color-picker, color-palette
Md Color Picker
Angular-Material based color picker
Stars: ✭ 253 (+84.67%)
Mutual labels:  color-picker, color-palette
Colorpicker
Simple, maintained and highly customizable colorpicker library for Android.
Stars: ✭ 31 (-77.37%)
Mutual labels:  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 (+2643.8%)
Mutual labels:  color-picker, color-palette
Leonardo
Generate colors based on a desired contrast ratio
Stars: ✭ 973 (+610.22%)
Mutual labels:  color-picker, color-palette

react-native-color-wheel

npm version

🎨 A react native reusable and color picker wheel

Usage

import React, { Component } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import { ColorWheel } from 'react-native-color-wheel';

const Example = ({onChange}) => (
  <View style={{flex: 1}}>
    <ColorWheel
      initialColor="#ee0000"
      onColorChange={color => console.log({color})}
      onColorChangeComplete={color => onChange(color)}
      style={{width: Dimensions.get('window').width}}
      thumbStyle={{ height: 30, width: 30, borderRadius: 30}}
    />
    <ColorWheel
      initialColor="#00ee00"
      style={{ marginLeft: 20, padding: 40, height: 200, width: 200 }}
    />
  </View>
);

Props

Name Description Type
initialColor Initial value in hex format String
onColorChange Callback when the value is changed or moved func
onColorChangeComplete Callback on mouseup or drag event has finished func
thumbSize Width of draggable thumb Number
thumbStyle CSS for the draggable thumb Object
demo screenshot

PRs and issues are more than welcome.

works with yeti

 This package powers Yeti Smart Home and is used in production. Follow us in Github or https://twitter.com/netbeast_co.

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].