0.3.14 • Published 9 years ago
react-colorpicker v0.3.14
React-ColorPicker
A simple colorpicker written using React.
Uses the Colr
library: https://github.com/stayradiated/colr
Installation
npm install --save react-colorpicker
You will also need to add some css styles.
See the example stylesheet for ideas.
Example Usage
var React = require('react');
var ColorPicker = require('react-colorpicker');
var colorpicker = new ColorPicker({
color: '#c0ffee',
onChange: function (color) {
// called whenever the color is changed
console.log(color.hexString());
}
});
React.renderComponent(colorpicker, document.body);
Setting the Color
Just change the color
attribute. Simple.
var Colr = require('colr');
var React = require('react');
var ColorPicker = require('react-colorpicker');
var App = React.createClass({
getInitialState: function () {
return {
color: '#000000',
};
},
setColor: function () {
var color = Colr.fromRgb(
Math.random() * 255,
Math.random() * 255,
Math.random() * 255
);
// replace current color and origin color
this.setState({
color: color.toHex()
});
},
handleChange: function (color) {
this.setState({
color: color.toHex()
});
},
render: function () {
/* jshint ignore: start */
return (
<div>
<button onClick={this.setColor}>Load Random Color</button>
<div>Active: {this.state.color}</div>
<div id='container'>
<ColorPicker
color={this.state.color}
onChange={this.handleChange}
/>
</div>
</div>
);
/* jshint ignore: end */
},
});
document.addEventListener('DOMContentLoaded', function () {
React.renderComponent(new App(), document.body);
});
License
MIT
0.3.14
9 years ago
0.3.13
9 years ago
0.3.12
9 years ago
0.3.11
9 years ago
0.3.9
9 years ago
0.3.8
10 years ago
0.3.7
10 years ago
0.3.6
10 years ago
0.3.5
10 years ago
0.3.4
10 years ago
0.3.3
10 years ago
0.3.2
10 years ago
0.3.1
10 years ago
0.3.0
10 years ago
0.2.1
10 years ago
0.2.0
10 years ago
0.1.0
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago