export default App
`

$3

| 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

$3

`js

`

!Demo popup

$3

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

$3

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

`js

`

$3

By default you will have the following color result:

`json
{
"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:

`js
color.rgb} />
`

The result value will be:

`json
{
"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:
`js
import React, { useState } from 'react'
import { AnyColorFormat, Colorpicker } from 'antd-colorpicker'

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

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

return (
style={{ maxWidth: '500px', margin: '20px auto', paddingBottom: '50px' }}
>