Color Picker Field

Includes a form input accompanied with color picker, based on React Color Picker.

See them in action: Color Picker Field


You can specify:

  • color in any form
  • name of linked field
  • placement
  • handler for color change

How to use


  • colorValue - string representation of color ('#FFF', 'orange', 'rgb(255, 255, 255)')
  • fieldName - name of field that can be used if you call the same handler for different fields
  • placemenet - string, where to show the color picker panel ('topLeft', 'topRight', 'bottomLeft', 'bottomRight')
  • changeColorHandler - the pointer to the color change handler in the parent component; takes 2 parameters: color, fieldName

import ColorPickerField from '@src/components/color-picker-field/ColorPickerField.jsx';

<ColorPickerField changeColorHandler={this.changeColor2} colorValue={this.state.color2} placement="bottomRight" fieldName="color2" />

Event handler takes 2 parameters: color and field name, for example: changeColor = (color, fieldName)=>{ let colorVal = {}; colorVal[fieldName] = color; this.setState(colorVal); }

Component props

  • icon(string or array of strings) - icon name (accordingly to Fontawesome naming)
  • color(string) - color name, for example "green" or "#FFF"
  • className(string or array of strings) - custom icon class name

Full example of using

import ColorPickerField from '@src/components/color-picker-field/ColorPickerField.jsx';

class ColorPickerFieldDemoView extends Component { constructor(props) { super(props);
this.state = { color: '#DB36AB', color2: 'red' }; } changeColor = (color, fieldName)=>{ let colorVal = {}; colorVal[fieldName] = color; this.setState(colorVal); } render() { return ( <div className="panel-light"> <div className="row"> <div className="col-md-6"> <h3>Color Picker Field demo <h5 className="">Bottom Left <div> <span>Selected color: <strong>{this.state.color} </div> <ColorPickerField
changeColorHandler={this.changeColor} colorValue={this.state.color} placement="bottomLeft" fieldName="color" /> <ColorPickerField
changeColorHandler={this.changeColor2} colorValue={this.state.color2} placement="bottomRight" fieldName="color2" /> </div> </div> </div>); } } export default ColorPickerFieldDemoView;