Skip to content

Latest commit

 

History

History
284 lines (183 loc) · 6.26 KB

color-picker.md

File metadata and controls

284 lines (183 loc) · 6.26 KB

ColorPicker

Source

Lets a user choose a color for text, shapes, marking tools, and other elements.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { ColorPicker } from 'chayns-components';

// ...

<ColorPicker {...} />

Props

The ColorPicker-component takes the following props:

Name Type Default Required
inline boolean false
color custom
bubblePosition number Bubble.position.BOTTOM_CENTER
onChange function
onChangeEnd function
onBlur function
transparency boolean false
parent custom
className string
style { [key: string]: number | string }
bubbleClassName string
bubbleStyle { [key: string]: number | string }
input boolean false
defaultColorModel number
children ReactNode
removeParentSpace boolean false
showAllColorModels boolean false
customColorsArray Array<custom>
showCustomColors boolean false
showGlobalColors boolean false
onCreateCustomColor function
onRemoveCustomColor function

inline

inline?: boolean

Display the color picker without a bubble.

color

color?: custom

The current color. Either a HEX-string, an HSV(A)- or RGB(A)-object.

bubblePosition

bubblePosition?: number

The bubble position. The possible values are listed under the Bubble-component.

onChange

onChange?: function

Will be called when changing the color.

onChangeEnd

onChangeEnd?: function

Will be called after the color was changed.

onBlur

onBlur?: function

Will be called when the picker loses focus.

transparency

transparency?: boolean

Wether the picker should show a transparency slider.

parent

parent?: custom

The parent node the bubble should be rendered into.

className

className?: string

The classname that will be set on the children wrapper.

style

style?: { [key: string]: number | string }

A React style object that will be assigned to the children wrapper element.

bubbleClassName

bubbleClassName?: string

A classname string that will be applied to the Bubble component.

bubbleStyle

bubbleStyle?: { [key: string]: number | string }

A React style object that will be applied to the Bubble component.

input

input?: boolean

Displays an input to type in the color.

defaultColorModel

defaultColorModel?: number

The color model that is used by default.

children

children?: ReactNode

Children // TODO

removeParentSpace

removeParentSpace?: boolean

Removes space from the parent to the page borders from the tooltip position. This is only needed if the parent is padded from the page and has a relative positioning.

showAllColorModels

showAllColorModels?: boolean

Shows all color models

customColorsArray

customColorsArray?: Array<custom>

An array of custom selectable colors

showCustomColors

showCustomColors?: boolean

Shows custom colors

showGlobalColors

showGlobalColors?: boolean

Shows global colors

onCreateCustomColor

onCreateCustomColor?: function

Will be called when a custom color is added

onRemoveCustomColor

onRemoveCustomColor?: function

Will be called when a custom color is removed