netbeast / React Native Color Wheel
Licence: mit
🌈 A react native reusable and color picker wheel
Stars: ✭ 137
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
🎨 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 |
PRs and issues are more than welcome.
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].