Skip to content

netbeast/react-native-color-wheel

Repository files navigation

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.