How to use the react-color/lib/components/common.ColorWrap function in react-color

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>

'#808900',
    '#194D33',
    '#0C797D',
    '#0062B1',
    '#653294',
    '#AB149E',
  ],
};

CustomColorPickerUI.propTypes = {
  color: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  onChangeComplete: PropTypes.func,
  onChange: PropTypes.func,
};

export const CustomColorPicker = colorWrap(CustomColorPickerUI);

);
};

Picker.propTypes = {
  disableAlpha: PropTypes.bool
};

Picker.defaultProps = {
  disableAlpha: false
};

export default ColorWrap(Picker);

'#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
    '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
    '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400',
    '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',
    '#0F1419', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',
    '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',
  ],
};

CustomColorPicker.propTypes = {
  color: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  onChangeComplete: PropTypes.func,
  onChange: PropTypes.func
};

export default colorWrap(CustomColorPicker);

<div>
          <div style="{overlayColor}"></div>
          <div>
            
          </div>
        </div>
        <input value="{topColor}">
      
    )
  }
}

export default ColorWrap(Picker)

<div style="{">
      { map(colors, (c) =&gt; (
        
      )) }
    </div>
  )
}

ColorPicker.defaultProps = {
  width: '200px',
  colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB',
           '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
  triangle: 'top-left',
}

export default ColorWrap(ColorPicker)

disableAlpha={this.props.disableAlpha}
          />
        
        
        
      
    )
  }
}

Sketch.defaultProps = {
  presetColors: [ '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0',
    '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF' ]
}

export default ColorWrap(Sketch)

return (
    <div>
      <div style="{{">
        
      </div>
      <div style="{{">
        
      </div>
      <div style="{{">
        
      </div>
    </div>
  )
}

export default ColorWrap(ColorPicker)

hex: PropTypes.string,
  hsl: PropTypes.object,
  hsv: PropTypes.object,
  rgb: PropTypes.object,
  onChange: PropTypes.func,
  disableAlpha: PropTypes.bool,
  readOnly: PropTypes.bool,
  renderers: PropTypes.func,
  onUnset: PropTypes.func
}

ColorPicker.defaultProps = {
  disableAlpha: false
}

export default ColorWrap(ColorPicker)

onChange={onChange}
        />
      
    
  );
};

Picker.propTypes = {
  disableAlpha: PropTypes.bool,
};

Picker.defaultProps = {
  disableAlpha: false,
};

export default ColorWrap(Picker);