How to use the react-color/lib/helpers/color.isValidHex 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 CarbonDesigns / carbon-ui / src / shared / ui / ColorPicker.tsx View on Github external
const handleChange = (data, e) => {
    if (data.hex) {
      color.isValidHex(data.hex) && onChange({
        hex: data.hex,
        source: 'hex',
      }, e)
    } else if (data.r || data.g || data.b) {
      onChange({
        r: data.r || rgb.r,
        g: data.g || rgb.g,
        b: data.b || rgb.b,
        a: rgb.a,
        source: 'rgb',
      }, e)
    } else if (data.a) {
      if (data.a < 0) {
        data.a = 0
      } else if (data.a > 100) {
        data.a = 100
github claus / react-dat-gui / dev / src / react-dat-gui / components / Picker / Fields.js View on Github external
handleChange = (value, e) => {
    color.isValidHex(value) && this.props.onChange({
      hex: value,
      source: 'hex',
    }, e);
  }
github VisualComposer / builder / public / sources / attributes / color / lib / sketch / SketchFields.js View on Github external
handleChange = (data) => {
    if (data.hex) {
      color.isValidHex(data.hex) && this.props.onChange({
        hex: data.hex,
        source: 'hex'
      })
    } else if (data.r || data.g || data.b) {
      this.props.onChange({
        r: data.r || this.props.rgb.r,
        g: data.g || this.props.rgb.g,
        b: data.b || this.props.rgb.b,
        a: this.props.rgb.a,
        source: 'rgb'
      })
    } else if (data.a) {
      if (data.a < 0) {
        data.a = 0
      } else if (data.a > 100) {
        data.a = 100
github sanity-io / sanity / packages / @sanity / color-input / src / ColorPickerFields.js View on Github external
const handleChange = (data, e) => {
    if (data.hex) {
      color.isValidHex(data.hex) &&
        onChange(
          {
            hex: data.hex,
            source: 'hex'
          },
          e
        )
    } else if (data.r || data.g || data.b) {
      onChange(
        {
          r: data.r || rgb.r,
          g: data.g || rgb.g,
          b: data.b || rgb.b,
          a: rgb.a,
          source: 'rgb'
        },
github elastic / kibana / src / legacy / core_plugins / vis_type_timeseries / public / components / custom_color_picker.js View on Github external
const handleSwatchChange = data => {
      if (data.hex) {
        color.isValidHex(data.hex) &&
          this.props.onChange({
            hex: data.hex,
            source: 'hex',
          });
      } else {
        this.props.onChange(data);
      }
    };
github elastic / kibana / src / core_plugins / metrics / public / components / custom_color_picker.js View on Github external
const handleSwatchChange = (data) => {
      if (data.hex) {
        color.isValidHex(data.hex) && this.props.onChange({
          hex: data.hex,
          source: 'hex',
        });
      } else {
        this.props.onChange(data);
      }
    };