max3a3/react-simple-colorpicker

Simple, composable, lightweight colorpicker for react

React-Simple-ColorPicker

Install

Via yarn:

npm install --save github:redgoose-dev/react-simple-colorpicker
yarn add github:redgoose-dev/react-simple-colorpicker

Usage

javascript

import React from 'react';
import ReactDOM from 'react-dom';
import ColorPicker from 'react-simple-colorpicker';

class App extends React.Component {

	static defaultProps = {
		initialColor: '#ffffff'
	};

	colorPicker = null;

	constructor(props) {
		super();

		this.state = {
			color : props.initialColor
		};
	}

	render() {
		return (
			<ColorPicker
				ref={(r) => { this.colorPicker = r; }}
				color={this.state.color}
				onChange={(color) => this.setState({ color: color })}
				//paletteColors={[]}
			/>
		);
	}
}

ReactDOM.render(<App initialColor="#ffffff" />, document.querySelector("#app"));

scss

@import '~react-simple-colorpicker/src/ColorPicker/index.scss';

Props

color

• type: String

Selected color

paletteColors

• type: Array

Palette colors array

onChange

• type: Function

Methods

changeColor

colorPicker.changeColor('#ff0000');