How to use react-color - 10 common examples

import ColorInput from './ColorInput';
import { Themeable } from '../../types';
import SpectrumPalettePointer, { SpectrumPalettePointerProps } from './SpectrumPalettePointer';
import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/data';

export interface SpectrumPaletteProps extends Themeable {
  color: string;
  onChange: (color: string) => void;
}

const renderPointer = (theme: GrafanaTheme) => (props: SpectrumPalettePointerProps) => (
  
);

// @ts-ignore
const SpectrumPicker = CustomPicker(({ rgb, hsl, onChange, theme }) => {
  return (
    <div style="{{">
      <div style="{{">
        </div></div>

borderRadius: '2px 2px 0 0',
    overflow: 'hidden',
  },
  Saturation: {
    radius: '2px 2px 0 0',
  },
  swatch: {
    width: '20px',
    height: '20px',
    borderRadius: '0px',
    marginBottom: '12px',
  },
});

/* eslint new-cap: ["error", { "capIsNew": false }] */
const CustomColorPickerInner = ColorWrap((props) => {
  const styles = buildStyles(props);

  // To fill space when customColors is less than 7.
  const dummySwatchListLength = Math.max(MAX_CUSTOM_COLORS - props.customColors.size, 0);
  const dummySwatchList = new List(Array(dummySwatchListLength)).map((_, i) => (
    <span>
      <div style="{styles.swatch}">
    
  ));

  return (
    <div style="{styles.picker}">
      <div style="{styles.saturation}">
        </div></div></div></span>

handleClickAdd = () => {
    let name = this.refInputName.current.value;
    // TODO: Name Validation
    this.refInputName.current.value = '';
    let sameNameKlasses = this.state.klasses.filter(function(klass) {
      return klass.name == name;
    });
    let targetKlass = {};
    if (sameNameKlasses.length > 0) {
      alert('Already registered.');
    } else {
      targetKlass.name = name;
    }
    const defaultColors = TwitterPicker.defaultProps.colors;
    const labelType = this.props.currentProject.label_type;
    const defaultMinSize = 
      labelType === 'BB2D' ? { x: 10, y: 10 } :
      labelType === 'BB2D3D' ? { x: 10, y: 10, z: 10 } :
      {};
    const idx = this.state.klasses.length;
    targetKlass.color = defaultColors[idx % defaultColors.length];
    targetKlass.minSize = defaultMinSize;
    let clonedKlasses = JSON.parse(JSON.stringify(this.state.klasses));
    clonedKlasses.push(targetKlass);
    this.setState({ klasses: clonedKlasses });
  };
  handleSubmit = () => {

var CustomComponent: StatelessComponent = (props: CustomProps) => {
    function onChange (color: ColorResult) {
        console.log(color)
    }

    return (
        <div>
            
            
            
            
            
        </div>
    )
}
var Custom = CustomPicker(CustomComponent)

var colors: Array = ["#000", "#333"]

render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))

)}
          direction="horizontal"
        />
      
    )
  }
}

Gradient.propTypes = {
  /** onChange event */
  onChange: PropTypes.func,
  /** Pointer Hex Color */
  hex: PropTypes.string,
}

export default CustomPicker(Gradient)

className={cx('chrome-picker')}
                    color={hex}
                    disableAlpha
                    onChange={onChange}
                  />
                
              )}
            ,
            document.querySelector('#tooltip-root'),
          )}
      
    );
  }
}

export const ColorPicker = CustomPicker(ColorPickerComponent);

source: 'hex',
      },
      e
    )
  }

  const swatches = props.colors.map((c) => (
    <div>
      
    </div>
  ))

  return <div>{swatches}</div>
}

export default CustomPicker(ColorPicker)

import React, { Component } from 'react';
import get from 'lodash/get';
import { CustomPicker } from 'react-color';
import Slider from 'material-ui/Slider';
import Color from '../utils/color';
import AvatarComponent from 'material-ui/Avatar';
import TextField from 'material-ui/TextField';

export const Avatar = props => { props.children };


const WrappedPicker = CustomPicker( props => (
	<div>
		<div style="{">
		</div></div>

);
}

TieredColorPicker.propTypes = {
  color: PropTypes.string.isRequired,
  rgb: PropTypes.shape({
    r: PropTypes.number,
    g: PropTypes.number,
    b: PropTypes.number,
    a: PropTypes.number,
  }).isRequired,
  onChangeComplete: PropTypes.func.isRequired,
};

export default CustomPicker(TieredColorPicker);

const swatches = this.props.colors.map((c) => (
      <div>
        
      </div>
    ))

    return <div>{swatches}</div>
  }
}

export default CustomPicker(ColorPicker)