ColorPicker

Pick a color with saturation, hue and alpha controls

Import: import { ColorPicker } from 'react-native-mantine';

Usage

import { ColorPicker } from 'react-native-mantine';

// Hex picker
<ColorPicker value={value} onChange={setValue} />

// Alpha slider with rgba output
<ColorPicker format="rgba" onChangeEnd={setValue} />

// Swatches-only palette
<ColorPicker
  withPicker={false}
  swatches={['#fa5252', '#228be6', '#12b886']}
  swatchesPerRow={7}
  onColorSwatchClick={(color) => console.log(color)}
/>

// HueSlider and AlphaSlider are also exported standalone
import { HueSlider, AlphaSlider } from 'react-native-mantine';

Props

Prop	Type	Default	Description
`value`	`string`		Color value for controlled component, in one of the supported formats
`defaultValue`	`string`		Default value for uncontrolled component
`onChange`	`(value: string) => void`		Called when color changes
`onChangeEnd`	`(value: string) => void`		Called when the user stops dragging or picks a swatch
`onColorSwatchClick`	`(color: string) => void`		Called when a color swatch is pressed
`format`	`'hex' \| 'hexa' \| 'rgb' \| 'rgba' \| 'hsl' \| 'hsla'`	`"hex"`	Color format, alpha slider is shown for hexa, rgba and hsla
`withPicker`	`boolean`	`true`	Determines whether the saturation/hue/alpha pickers should be displayed
`swatches`	`string[]`		Predefined colors displayed as swatches under the pickers
`swatchesPerRow`	`number`	`7`	Number of swatches per row
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"md"`	Controls the size of the pickers
`fullWidth`	`boolean`	`false`	Determines whether the picker should take 100% of available width
`saturationLabel`	`string`	`"Saturation"`	Saturation area accessibility label
`hueLabel`	`string`	`"Hue"`	Hue slider accessibility label
`alphaLabel`	`string`	`"Alpha"`	Alpha slider accessibility label

Source on GitHub · npm