/react-native-hsv-color-picker

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

Primary LanguageJavaScript

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
  3. Fully Controlled - no inner state involved
  4. 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 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

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

  1. Start Expo

    $ 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

License

MIT