react gradient color picker
npm install react-gradient-color-pickerThis 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.
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).
sh
npm install --save react-gradient-color-picker
`Properties
$3
js
[
{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.
$3
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.
$3
The width of the component.API
$3
return an array of color stops$3
return a D3 color scale function.
Highlighting Demo
js
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 (
);
}
``react-gradient-color-picker is available under MIT. See LICENSE for more details.