# TypeScript


## The types you will reach for

```ts
import type {
  ColorChangeResult,
  ColorFormat,
  Hsva,
  Rgba,
  ColorPalette,
  ModeId,
  PickerMode,
} from "chroma-panel";
```

## ColorChangeResult

What every change handler receives. Every field is always present, whatever you
set `format` to, so you can read `hex` and `rgba` regardless.

```ts
type ColorChangeResult = {
  hex: string;
  hexa: string;
  rgb: Rgb;
  rgba: Rgba;
  hsl: Hsl;
  hsla: Hsla;
  hsva: Hsva;
  css: string;
};
```

`css` is the string in whichever `format` you chose, and the value a form
submits.

## Typing a handler

```tsx
import { ColorInput, type ColorChangeResult } from "chroma-panel";

function handleChange(result: ColorChangeResult): void {
  console.log(result.hex, result.hsva);
}

<ColorInput onChange={handleChange} />;
```

## Prop types

Both component prop interfaces are exported, so you can extend them:

```ts
import type { ChromaPanelProps, ColorInputProps } from "chroma-panel";

type BrandPickerProps = ColorInputProps & { label: string };
```

`ColorInputProps` extends `ChromaPanelProps`, so everything the panel takes,
the input takes too.