@fallingllama/react-native-hsv-color-picker
v1.0.2
Published
a react native HSV(hue, saturation, value) color picker
Downloads
3
Maintainers
Readme
ℹ️ Forked from https://github.com/yuanfux/react-native-hsv-color-picker.git
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
import React from 'react';
import { StyleSheet, View } from 'react-native';
import HsvColorPicker from 'react-native-hsv-color-picker';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
hue: 0,
sat: 0,
val: 1,
};
this.onSatValPickerChange = this.onSatValPickerChange.bind(this);
this.onHuePickerChange = this.onHuePickerChange.bind(this);
}
onSatValPickerChange({ saturation, value }) {
this.setState({
sat: saturation,
val: value,
});
}
onHuePickerChange({ hue }) {
this.setState({
hue,
});
}
render() {
const { hue, sat, val } = this.state;
return (
<View style={styles.container}>
<HsvColorPicker
huePickerHue={hue}
onHuePickerDragMove={this.onHuePickerChange}
onHuePickerPress={this.onHuePickerChange}
satValPickerHue={hue}
satValPickerSaturation={sat}
satValPickerValue={val}
onSatValPickerDragMove={this.onSatValPickerChange}
onSatValPickerPress={this.onSatValPickerChange}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
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