react-native-hsv-color-picker

> a react native HSV(hue, saturation, value) color picker

!npm  !GitHub issues !NPM  

Preview

View Live Demo

react-native-hsv-color-picker is a React Native component for building an HSV (hue, saturation, value) color picker.

Highlighted Features:
1. Real Rendering - no image involved / all colors are truly rendered
2. Performance - empowered by native gradient lib
4. Fully Controlled - no inner state involved
3. Fully Supported - support both React Native & Expo projects

Install

``bash
$ npm install react-native-hsv-color-picker --save
`

$3

> You are all set.

$3

> react-native-hsv-color-picker is powered by the lib expo-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
`js
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 (

huePickerHue={hue}
onHuePickerDragMove={this.onHuePickerChange}
onHuePickerPress={this.onHuePickerChange}
satValPickerHue={hue}
satValPickerSaturation={sat}
satValPickerValue={val}
onSatValPickerDragMove={this.onSatValPickerChange}
onSatValPickerPress={this.onSatValPickerChange}
/>

);
}
}

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

1. Start Expo
`bash
$ npm install

$ npm start
`

2. Run on simulator
- type the following command in the Terminal after the project is booted up
- a for android simulator
- i for iOS simulator

3. Run on device
- require the installation of corresponding iOS client or android client on the device
- scan the QR code from Terminal using the device

4. More on Expo Guide`

Related

- scaffolded by react-native-component-cli

License

MIT