<main></main>
class ColorPalette extends React.Component {
render() {
const colors = [];
for (let i=-360; i < 360; i++) {
colors.push(tinycolor(this.props.start).spin(i).toString());
}
return (
colors.map(color => (
<div style={{
width: '100px',
height: '100px',
background: color,
display: 'inline-block',
margin: '5px',
}} />
))
);
}
}
class ColorSelector extends React.Component {
constructor(props) {
super(props);
this.state = { color: '#000000' };
this.setColor = this.setColor.bind(this);
}
setColor(e) {
this.setState({ color: e.target.value });
}
render() {
return (
<div>
<div>
<input type="color" value={this.state.color} onChange={this.setColor} />
</div>
<ColorPalette start={this.state.color} />
</div>
);
}
}
ReactDOM.render(<ColorSelector/>, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.