Skip to content

javidhsueh/react-gradient-color-picker

This branch is 40 commits ahead of, 172 commits behind survivejs/react-component-boilerplate:master.

Folders and files

NameName
Last commit message
Last commit date
Sep 20, 2016
Feb 24, 2016
Sep 20, 2016
Jan 14, 2016
Jan 4, 2016
May 12, 2015
Jun 7, 2015
Feb 17, 2016
Jun 7, 2015
Sep 20, 2016
Nov 29, 2015
Jan 28, 2016
Mar 24, 2015
Apr 13, 2016
Dec 27, 2015
Apr 13, 2016
Feb 5, 2016
Apr 14, 2016
Feb 3, 2016

Repository files navigation

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. Please checkout the example at here.

Alt text

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', opacity: 1.0},
	{offset: 0.5, color: '#fff', opacity: 1.0},
	{offset: 1.0, color: '#0f0', opacity: 1.0}
]

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.

API

getColorStops

return an array of color stops

getColorMap

return a D3 color scale function.

Highlighting Demo

render() {
	var style = {
		width: '300px'
	};
	var stops = [
		{offset: 0.0, color: '#f00', opacity: 1.0},
		{offset: 0.5, color: '#fff', opacity: 1.0},
		{offset: 1.0, color: '#0f0', opacity: 1.0}
	];
	var onChangeCallback = function onChangeCallback(colorStops, colorMap) {
  		// colorStops: an array of color stops
      	// colorMap: a d3 linear scale function
      	// how to get the mapped color:
      	// var mappedColor = colorMap(0.8);
  	}
	return (
		<div style={style}>
			<ReactGradientColorPicker onChange={onChangeCallback} stops={stops}/>
		</div>
	);
}

License

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 86.6%
  • CSS 7.5%
  • HTML 5.9%