react-gradient-color-picker

react-gradient-color-picker

This is a simple gradient color picker integrated with react. The reason I decide to develop it since there's no usable gradient color picker on npm so far (2015/12/30). Please join me to make it better and more useful.

Development

Please checkout the code at here.

• Linting - npm run lint - Runs ESLint.
• Testing - npm test and npm run tdd - Runs Karma/Mocha/Chai/Phantom. Code coverage report is generated through istanbul/isparta to build/.
• Developing - npm start - Runs the development server at localhost:8080 and use Hot Module Replacement. You can override the default host and port through env (HOST, PORT).

Installation

npm install --save react-gradient-color-picker

Properties

stops {array} default:

[
	{offset: 0.0, color: '#f00'},
	{offset: 0.5, color: '#fff'},
	{offset: 1.0, color: '#0f0'}
]

The color stops of the color map.

onChange {func}

Callback called on every value change. The return value is a d3 linear color scale. Input value range is between 0 to 1. It only triggers when the stop color changes or end of dragging the handlers.

width {number}

The width of the component.

Highlighting Demo

render() {
	var style = {
		width: '300px'
	};
	var stops = [
		{offset: 0.0, color: '#f00'},
		{offset: 0.5, color: '#fff'},
		{offset: 1.0, color: '#0f0'}
	];
	var onChangeCallback = function onChangeCallback(colorMap) {
  		// var mappedColor = colorMap(0.8);
  		// console.log(mappedColor);
  	}
	return (
		<div style={style}>
			<ReactGradientColorPicker onChange={onChangeCallback} stops={stops}/>
		</div>
	);
}

License

react-gradient-color-picker is available under MIT. See LICENSE for more details.