antd-colorpicker

Package helps you to add colorpicker to Antd Design form.

React-color is used as colorpicker.

Live Demo

Installation:

npm install antd-colorpicker --save-dev

or

yarn add -D antd-colorpicker

Usage :

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

Properties

| 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

You can use one of the following: BlockPicker | ChromePicker | CirclePicker | CompactPicker | GithubPicker | GooglePicker | HuePicker | MaterialPicker | PhotoshopPicker | SketchPicker | SliderPicker | SwatchesPicker | TwitterPicker

<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