New to KendoReact? Start a free 30-day trial

ColorPaletteHandle

Interface

Represents the imperative handle exposed by the ColorPalette component through ref.

Definition

Package:@progress/kendo-react-inputs

Syntax:

tsx

const paletteRef = useRef<ColorPaletteHandle>(null);

// Focus the palette programmatically
paletteRef.current?.focus();

// Access the wrapper element
const width = paletteRef.current?.wrapperRef.current?.offsetWidth;

<ColorPalette ref={paletteRef} palette="basic" />

Properties

focus

() => void

Programmatically focuses the ColorPalette component.

When called:

The root div element receives DOM focus
The first color tile (or previously selected tile) is focused for keyboard navigation
The component's onFocus callback is triggered

wrapperRef

RefObject<null | HTMLDivElement>

A React ref to the root wrapper element of the ColorPalette.

This ref can be used to access the underlying DOM element for scenarios such as:

Measuring the component dimensions
Integrating with non-React libraries
Programmatic scrolling or focus management

The ref is populated after the component mounts and will be null before that.