JSPM

react-native-rectangle-color-picker

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q51332F
  • License MIT

A color picker on diamond or rectangle palette

Package Exports

  • react-native-rectangle-color-picker

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 (react-native-rectangle-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-rectangle-color-picker

npm version npm downloads npm licence Platform

A color picker on diamond or rectangle palette.

Install

npm i --save react-native-rectangle-color-picker

Usage

import React from 'react';
import { View } from 'react-native';
import tinycolor from 'tinycolor2';
import ColorPicker from 'react-native-rectangle-color-picker';

export default class SliderColorPickerExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = { oldColor: '#dc402b' };
    }

    componentDidMount() {
        setTimeout(() => this.setState({ oldColor: '#fde200' }), 1000);
    }

    changeColor = colorHsv => this.setState({ oldColor: tinycolor(colorHsv).toHexString() })

    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <ColorPicker
                    ref={view => {this.colorPicker = view;}}
                    oldColor={this.state.oldColor}
                    onColorChange={this.changeColor}
                    textSaturation={'Saturation'}
                    diamond={true}
                    staticPalette={true}/>
            </View>
        );
    }
}

Props

Prop Type Optional Default Description
oldColor Color string Yes undefined Initial positon of the picker indicator
onColorChange function Yes Callback called while the user click a color or release the slider. The 1st argument is color in HSV representation (see below). The 2nd string argument is always 'end'.
hideSliders bool Yes false Set this to true to hide the saturation sliders.
textSaturation string Yes 'Saturation' Set the title text of the saturation slider.
diamond bool Yes true Show diamond or rectangle palette.
staticPalette bool Yes true Set this to false to let the slider change the saturation of palette.

HSV color representation is an object literal with properties:

{
    h: number, // <0, 360>
    s: number, // <0, 1>
    v: number, // <0, 1>
}

Alipay: flyskywhy@gmail.com

ETH: 0xd02fa2738dcbba988904b5a9ef123f7a957dbb3e