Add colorpicker to Ant Design form

This is an overview for the npm package antd-colorpicker

Ant design is very convinient design system for building efficient user interfaces.

While working with it, I faced with the necessity of adding colorpicker to my form. Unfortunately, there is no such component.
Antd docs suggest to use third-party libraries for creating the colorpicker.

Eventually, I decided, that it will be helpful to write npm package for everyone, who will faced with the same issue as I am.

NPM antd-colorpicker

How to use it?

Install the package:

npm install antd-colorpicker --save-dev

yarn add -D antd-colorpicker

Add Colorpicker to your form inside Form.Item:

import React from 'react'
import { Button, Form } from 'antd'
import { Colorpicker, ColorPickerValue } from 'antd-colorpicker'

import 'antd/dist/antd.css'

const App = () => {
  const initialValues = { color: { r: 26, g: 14, b: 85, a: 1 } }
  const handleOnFinish = (values: { color: ColorPickerValue }) => {
    console.log(values)
  }

  return (
    <Form onFinish={handleOnFinish} initialValues={initialValues}>
      <Form.Item label={'Colorpicker'} name={`color`}>
        <Colorpicker />
      </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          Show values in console
        </Button>
      </Form.Item>
    </Form>
  )
}

export default App

It will be the simpliest colorpicker.

Customization

You can use the following properties to customize the colorpicker:

Property	Description	Type	Default
picker	Type of the picker	BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker GooglePicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker	SketchPicker
popup	Use popup for colorpicker. Component Popover	boolean	false
onColorResult	Function that changes the color value, which will be returned	function(color)	undefined
blockStyles	Relevant only when `popup=true`. CSS styles for block, which changes the color after picking it at popup window	CSSProperties	{ }
popoverProps	Properties for `Popover` component	object	{ }
...rest	Custom properties for react-color pickers	props

Examples

Popup window

<Colorpicker popup />

Change block, which fires popup window

<Colorpicker
  popup
  blockStyles={{
    width: '30px',
    height: '30px',
    borderRadius: '50%',
  }}
/>

Choose one of the 13 types of picker

<Colorpicker picker={'CirclePicker'} />

Customize the result value of the color

By default you will have the following color result:

{
  "hsl": {
    "h": 250.3448275862069,
    "s": 0.1594202898550725,
    "l": 0.346725,
    "a": 1
  },
  "hex": "#4f4a67",
  "rgb": {
    "r": 79,
    "g": 74,
    "b": 103,
    "a": 1
  },
  "hsv": {
    "h": 250.3448275862069,
    "s": 0.2750000000000001,
    "v": 0.402,
    "a": 1
  },
  "oldHue": 250.3448275862069,
  "source": "hsv"
}

Let's try to change it, to get what we want:

<Colorpicker onColorResult={(color) => color.rgb} />

The result value will be:

{
  "r": 79,
  "g": 74,
  "b": 103,
  "a": 1
}

How to use the component outside the form?

You have to define value and onChange (or onChangeComplete) props.

This is how your component may look like:

import React, { useState } from 'react'
import { AnyColorFormat, Colorpicker } from 'antd-colorpicker'

const App = () => {
  const [color, setColor] = useState<AnyColorFormat>({
    r: 0,
    g: 0,
    b: 0,
    a: 0.5,
  })

  const onChange = (color: AnyColorFormat) => {
    setColor(color)
  }

  return (
    <div
      style={{ maxWidth: '500px', margin: '20px auto', paddingBottom: '50px' }}
    >
      <Colorpicker value={color} onChange={onChange} />
    </div>
  )
}

export default App

This is it! Enjoy!

Blog