How to use the react-color.CustomPicker function in react-color

To help you get started, we’ve selected a few react-color examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github grafana / grafana / packages / grafana-ui / src / components / ColorPicker / SpectrumPalette.tsx View on Github external
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>
github DefinitelyTyped / DefinitelyTyped / react-color / react-color-tests.tsx View on Github external
var CustomComponent: StatelessComponent = (props: CustomProps) =&gt; {
    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"))
github vtex / styleguide / react / components / ColorPicker / Gradient.js View on Github external
)}
          direction="horizontal"
        /&gt;
      
    )
  }
}

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

export default CustomPicker(Gradient)
github reportportal / service-ui / app / src / components / main / colorPicker / colorPicker.jsx View on Github external
className={cx('chrome-picker')}
                    color={hex}
                    disableAlpha
                    onChange={onChange}
                  /&gt;
                
              )}
            ,
            document.querySelector('#tooltip-root'),
          )}
      
    );
  }
}

export const ColorPicker = CustomPicker(ColorPickerComponent);
github inkandswitch / pushpin / src / renderer / components / ui / ColorPicker.tsx View on Github external
source: 'hex',
      },
      e
    )
  }

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

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

export default CustomPicker(ColorPicker)
github artpi / SmartPi / web / modes / rgb-control.js View on Github external
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 =&gt; { props.children };


const WrappedPicker = CustomPicker( props =&gt; (
	<div>
		<div style="{">
		</div></div>
github plotly / react-chart-editor / src / components / widgets / TieredColorPicker.js View on Github external
);
}

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);
github inkandswitch / pushpin / src / renderer / components / ColorPicker.tsx View on Github external
const swatches = this.props.colors.map((c) =&gt; (
      <div>
        
      </div>
    ))

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

export default CustomPicker(ColorPicker)
github wadackel / color-classifier / demo / src / js / components / color-picker.js View on Github external
<div style="{popoverStyle}">
        <div style="{coverStyle}">
        <div style="{pickerStyle}">
          <div style="{saturationStyle}">
            
            <div style="{hueWrapperStyle}">
              
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default CustomPicker(ColorPicker)
</div>
github alecortega / palettable / client / src / components / colors / tools / ColorPicker.js View on Github external
/&gt;
          
          <div>
            <div>
              <div>
                
              </div>
            </div>
          </div>
        
      
    );
  }
}

export default CustomPicker(ColorPicker, styles);