JSPM

@nghinv/react-native-color-wheel

0.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q47152F
  • License MIT

React Native color wheel Library

Package Exports

  • @nghinv/react-native-color-wheel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nghinv/react-native-color-wheel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nghinv/react-native-color-wheel

React Native Color Wheel Library use reanimated 2


CircleCI Version MIT License All Contributors PRs Welcome

Installation

yarn add @nghinv/react-native-color-wheel

or

npm install @nghinv/react-native-color-wheel

Usage

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import WheelPicker, { ColorAnimated } from '@nghinv/react-native-color-wheel';
import Slider from '@nghinv/react-native-slider';

function App() {
  const [color, setColor] = useState('#0000ff');
  const hsv = useSharedValue({
    h: 0,
    s: 0,
    v: 100,
  });

  useEffect(() => {
    hsv.value = hex2Hsv('#0000ff');
  }, [hsv]);

  const onChange = (v: number) => {
    hsv.value = {
      h: hsv.value.h,
      s: hsv.value.s,
      v,
    };
  };

  return (
    <View style={styles.container}>
      <ColorAnimated
        hsv={hsv}
        style={styles.currentColor}
      />
      <WheelPicker
        hsv={hsv}
        size={260}
        // initialColor={color}
        onColorChange={(value) => {
          // setColor(value);
          hsv.value = hex2Hsv(value);
        }}
        onColorConfirm={(value) => {
          console.log('onColorConfirm', value);
        }}
      />
      <Slider
        width={240}
        style={{ marginTop: 32 }}
        value={hsv.value.v}
        onChange={onChange}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  currentColor: {
    width: 80,
    height: 40,
    borderRadius: 20,
    marginBottom: 24,
    borderWidth: 2,
    borderColor: 'white',
  },
});

export default App;

Property

Property Type Default Description
initialColor string #ffffff
size number screen_width - 32
thumbSize number 32
disabled boolean false
onColorChange (color: string) => void undefined
onColorConfirm (color: string) => void undefined
hsv Animated.SharedValue<HsvType> undefined