react-native-hsv-color-picker
a react native HSV(hue, saturation, value) color picker
Preview
react-native-hsv-color-picker
is a React Native component for building an HSV (hue, saturation, value) color picker.
Highlighted Features:
- Real Rendering - no image involved / all colors are truly rendered
- Performance - empowered by native gradient lib
- Fully Controlled - no inner state involved
- Fully Supported - support both React Native & Expo projects
Install
$ npm install react-native-hsv-color-picker --save
Use with Expo Project
You are all set.
Use with React Native Project
react-native-hsv-color-picker
is powered by the libexpo-linear-gradient
. Besides above command, you have to follow this Instruction to add relevant dependencies to your project.
Usage
a minimally-configured HSV color picker
;;; Component { superprops; thisstate = hue: 0 sat: 0 val: 1 ; thisonSatValPickerChange = thisonSatValPickerChange; thisonHuePickerChange = thisonHuePickerChange; } { this; } { this; } { const hue sat val = thisstate; return <View style=stylescontainer> <HsvColorPicker huePickerHue=hue onHuePickerDragMove=thisonHuePickerChange onHuePickerPress=thisonHuePickerChange satValPickerHue=hue satValPickerSaturation=sat satValPickerValue=val onSatValPickerDragMove=thisonSatValPickerChange onSatValPickerPress=thisonSatValPickerChange /> </View> ; } const styles = StyleSheet;
Props
Basic Props
Prop | Type | Default | Description |
---|---|---|---|
containerStyle |
ViewPropTypes.style | {} |
style for the outmost container |
huePickerContainerStyle |
ViewPropTypes.style | {} |
style for the hue picker container |
huePickerBorderRadius |
number | 0 |
border radius for the hue picker |
huePickerHue |
number | 0 |
hue value(h in hsv , ranged in [0, 360] ) for the hue picker |
huePickerBarWidth |
number | 12 |
bar width for the hue picker |
huePickerBarHeight |
number | 200 |
bar height for the hue picker |
huePickerSliderSize |
number | 24 |
slider diameter for the hue picker |
satValPickerContainerStyle |
ViewPropTypes.style | {} |
style for the saturation & value picker container |
satValPickerBorderRadius |
number | 0 |
border radius for the saturation & value picker |
satValPickerSize |
number | 200 |
width / height for the saturation & value picker |
satValPickerSliderSize |
number | 24 |
slider diameter for the saturation & value picker |
satValPickerHue |
number | 0 |
hue value(h in hsv , ranged in [0, 360] ) for the saturation & value picker |
satValPickerSaturation |
number | 1 |
saturation value(s in hsv , ranged in [0, 1] ) for the saturation & value picker |
satValPickerValue |
number | 1 |
value(v in hsv , ranged in [0, 1] ) for the saturation & value picker |
Callback Props
Prop | Callback Params | Description |
---|---|---|
onHuePickerDragStart |
{ hue: number, gestureState: gestureState } |
called when hue picker starts to drag |
onHuePickerDragMove |
{ hue: number, gestureState: gestureState } |
called when hue picker is dragging |
onHuePickerDragEnd |
{ hue: number, gestureState: gestureState } |
called when hue picker stops dragging |
onHuePickerDragTerminate |
{ hue: number, gestureState: gestureState } |
called when another component has become the responder |
onHuePickerPress |
{ hue: number, nativeEvent: nativeEvent } |
called when hue picker is pressed |
onSatValPickerDragStart |
{ saturation: number, value: number, gestureState: gestureState } |
called when saturation & value picker starts to drag |
onSatValPickerDragMove |
{ saturation: number, value: number, gestureState: gestureState } |
called when saturation & value picker is dragging |
onSatValPickerDragEnd |
{ saturation: number, value: number, gestureState: gestureState } |
called when saturation & value picker stops dragging |
onSatValPickerDragTerminate |
{ saturation: number, value: number, gestureState: gestureState } |
called when another component has become the responder |
onSatValPickerPress |
{ saturation: number, value: number, nativeEvent: nativeEvent } |
called when saturation & value picker is pressed |
Methods
Instance Methods
Use
ref
to call instance methods
Method | Params | Return Type | Description |
---|---|---|---|
getCurrentColor |
- | string |
get current picked color in hex format |
Dev
The
demo
folder contains a standalone Expo project, which can be used for dev purpose.
react-native - 0.61
react - 16.9
-
Start Expo
$ npm install$ npm start -
Run on
simulator
- type the following command in the
Terminal
after the project is booted up a
forandroid
simulatori
foriOS
simulator
- type the following command in the
-
Run on
device
- require the installation of corresponding
iOS client
orandroid client
on the device - scan the QR code from
Terminal
using the device
- require the installation of corresponding
-
More on
Expo Guide
Related
- scaffolded by react-native-component-cli
License
MIT