React Native Color Wheel Save

:rainbow: A react native reusable and color picker wheel

Project README

react-native-color-wheel

npm version

:art: 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.

Open Source Agenda is not affiliated with "React Native Color Wheel" Project. README Source: netbeast/react-native-color-wheel
Stars
170
Open Issues
18
Last Commit
1 year ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating