https://github.com/netbeast/react-native-color-wheel

:rainbow: A react native reusable and color picker wheel
https://github.com/netbeast/react-native-color-wheel

art color-palette color-picker colorsys javascript npm-module react react-native

Last synced: 3 months ago
JSON representation

:rainbow: A react native reusable and color picker wheel

• Host: GitHub
• URL: https://github.com/netbeast/react-native-color-wheel
• Owner: netbeast
• License: mit
• Created: 2017-10-24T16:02:18.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T10:14:38.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T02:34:30.103Z (6 months ago)
• Topics: art, color-palette, color-picker, colorsys, javascript, npm-module, react, react-native
• Language: JavaScript
• Homepage: https://getyeti.co
• Size: 1.28 MB
• Stars: 169
• Watchers: 10
• Forks: 55
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-color-wheel ★72 - A react native reusable color picker wheel (Components / UI)
• awesome-react-native - react-native-color-wheel ★72 - A react native reusable color picker wheel (Components / UI)
• awesome-reactnative-ui - react-native-color-wheel - native-color-wheel/master/screenshot.png)| (Others)
• awesome-reactnative-ui - react-native-color-wheel - native-color-wheel/master/screenshot.png)| (Others)
• awesome-react-native - react-native-color-wheel ★72 - A react native reusable color picker wheel (Components / UI)
• awesome-react-native - react-native-color-wheel ★72 - A react native reusable color picker wheel (Components / UI)

README

        
# react-native-color-wheel

![npm version](https://badge.fury.io/js/react-native-color-wheel.svg)

:art: A react native reusable and color picker wheel

## Usage

```javascript

import React, { Component } from 'react';

import { Dimensions, StyleSheet, View } from 'react-native';

import { ColorWheel } from 'react-native-color-wheel';

const Example = ({onChange}) => (

  

     console.log({color})}

      onColorChangeComplete={color => onChange(color)}

      style={{width: Dimensions.get('window').width}}

      thumbStyle={{ height: 30, width: 30, borderRadius: 30}}

    />

    

  

);

```

## 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](https://getyeti.co) and is used in production.

Follow us in Github or https://twitter.com/netbeast_co.