Pikas UI

@pikas-ui/color-picker

This package contains a color-picker component that can be used to pick a color.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/color-picker

yarn add @pikas-ui/color-picker

pnpm add @pikas-ui/color-picker

Usage

ColorPicker

The color picker component is a component that can be used to pick a color. You can select a color by clicking on the color picker or by typing a color in the textfield.

Color Picker

This is a description

import { ColorPicker } from '@pikas-ui/color-picker';

const Example: React.FC = () => {
  return (
    <ColorPicker
      label="Color Picker"
      description="This is a description"
      required
      defaultValue="#52A2FF"
    />
  );
};

Props

Prop	Description	Type	Default
`value`	The value of the color picker	`string`	-
`defaultValue`	The default value of the color picker	`string`	`"#FFFFFF'`
`onChange`	The onChange function of the color picker	`(value: string) => void`	-
`css`	The css object	`ColorPickerCSS`	-
`description`	The description of the color picker	`string`	-
`info`	The info of the color picker	`ReactNode`	-
`label`	The label of the color picker	`string` or `ReactNode`	-
`fontSize`	The font size of the color picker	`PikasFontSize`	`"em-base'`
`width`	The width of the color picker	`number or string`	`"100%'`
`maxWidth`	The max width of the color picker	`number or string`	`"100%'`
`minWidth`	The min width of the color picker	`number or string`	-
`disabled`	If the color picker is disabled	`boolean`	-
`id`	The id of the color picker	`string`	-
`required`	If the color picker is required	`boolean`	-
`textError`	The text error of the color picker	`string`	-
`textfield`	The textfield props of the color picker	`TextfieldProps`	-
`hideTextfield`	If the textfield is hidden	`boolean`	`false`

Contributing

This documentation can be edited on GitHub here