components/XYPad

Interfaces

XYPadAreaProps

Defined in: react/src/components/XYPad/Area.tsx:10

Properties

children?

optional children?: ReactNode;

Defined in: react/src/components/XYPad/Area.tsx:20

<XYPad.Thumb /> goes here.

className?

optional className?: string;

Defined in: react/src/components/XYPad/Area.tsx:17

color?

optional color?: string;

Defined in: react/src/components/XYPad/Area.tsx:16

Sets --color.

height?

optional height?: string | number;

Defined in: react/src/components/XYPad/Area.tsx:14

Sets --height.

ref?

optional ref?: Ref<HTMLDivElement>;

Defined in: react/src/components/XYPad/Area.tsx:21

style?

optional style?: CSSProperties;

Defined in: react/src/components/XYPad/Area.tsx:18

width?

optional width?: string | number;

Defined in: react/src/components/XYPad/Area.tsx:12

Sets --width; the size the theme gives it stands when omitted.

XYPadMethods

Defined in: react/src/components/XYPad/index.tsx:130

Properties

blur

blur: () => void;

Defined in: react/src/components/XYPad/index.tsx:132

Returns

void

focus

focus: () => void;

Defined in: react/src/components/XYPad/index.tsx:131

Returns

void

original

original: Ref<HTMLDivElement>;

Defined in: react/src/components/XYPad/index.tsx:133

XYPadProps

Defined in: react/src/components/XYPad/index.tsx:51

Two-dimensional slider component.

The per-axis settings mirror Slider, given as [x, y] tuples. A plain value applies to both axes.

Properties

children

children: ReactNode;

Defined in: react/src/components/XYPad/index.tsx:127

The pad renders exactly what you compose here; there is no default markup to fall back to.

Example

<XYPad.Root value={[x, y]} min={0} max={100} onChange={setValue}>
  <XYPad.Area>
    <XYPad.Thumb />
  </XYPad.Area>
</XYPad.Root>

disabled?

optional disabled?: boolean;

Defined in: react/src/components/XYPad/index.tsx:109

dragSensitivity?

optional dragSensitivity?: ModifierValue<number>;

Defined in: react/src/components/XYPad/index.tsx:91

How much a drag moves the value, per modifier key.

1 is the pointer position itself, which is what a drag normally is here. Anything else turns the drag relative: 0.1 makes the same movement cover a tenth of the travel, so the value stops following the pointer and starts moving a tenth as fast. Shift is bound to 0.1 by default, to match what it does on the arrow keys.

Pressing or releasing the key mid-drag does not disturb the value: the travel so far is kept and the new sensitivity applies from there. The pointer and the value stay apart for the rest of the drag — snapping them back together on release would move the value nobody asked to move.

Default

{ default: 1, shift: 0.1 }

externalStyles?

optional externalStyles?: object;

Defined in: react/src/components/XYPad/index.tsx:104

cursor?

optional cursor?: Cursor;

userSelectNone?

optional userSelectNone?: boolean;

keyboard?

optional keyboard?: InputEventOptions | null;

Defined in: react/src/components/XYPad/index.tsx:102

How much one arrow key press moves the value.

Shift moves a tenth of a step by default. Name a modifier to change that, or pass a bare ['raw', 1] to use no modifier at all. A modifier amount is not snapped to step.

If null, no event will be triggered

max

max: number | readonly [number, number];

Defined in: react/src/components/XYPad/index.tsx:54

min

min: number | readonly [number, number];

Defined in: react/src/components/XYPad/index.tsx:53

onChange?

optional onChange?: (value) => void;

Defined in: react/src/components/XYPad/index.tsx:112

Parameters

Parameter	Type
`value`	`XY`<`number`>

Returns

void

onDragEnd?

optional onDragEnd?: (value) => void;

Defined in: react/src/components/XYPad/index.tsx:114

Parameters

Parameter	Type
`value`	`XY`<`number`>

Returns

void

onDragStart?

optional onDragStart?: (value) => void;

Defined in: react/src/components/XYPad/index.tsx:113

Parameters

Parameter	Type
`value`	`XY`<`number`>

Returns

void

readonly?

optional readonly?: boolean;

Defined in: react/src/components/XYPad/index.tsx:110

reverse?

optional reverse?: boolean | readonly [boolean, boolean];

Defined in: react/src/components/XYPad/index.tsx:67

scale?

optional scale?: Scale | readonly [Scale, Scale];

Defined in: react/src/components/XYPad/index.tsx:66

How the value of each axis is distributed across the travel.

Pick one of the scales from @tremolo-ui/functions: linearScale, exponentialScale, curveScale(n), symmetricSkewScale(n), or skewScale(n) for a value that has to match a JUCE parameter.

Default

linearScale

step?

optional step?: number | readonly [number, number];

Defined in: react/src/components/XYPad/index.tsx:56

value

value: XY<number>;

Defined in: react/src/components/XYPad/index.tsx:52

wheel?

optional wheel?: InputEventOptions | null;

Defined in: react/src/components/XYPad/index.tsx:74

wheel control option. Scrolling sideways moves x, which is what a browser turns shift+wheel into. If null, no event will be triggered

XYPadThumbMethods

Defined in: react/src/components/XYPad/Thumb.tsx:29

Properties

blur

blur: () => void;

Defined in: react/src/components/XYPad/Thumb.tsx:31

Returns

void

focus

focus: () => void;

Defined in: react/src/components/XYPad/Thumb.tsx:30

Returns

void

XYPadThumbProps

Defined in: react/src/components/XYPad/Thumb.tsx:15

Properties

children?

optional children?: ReactNode;

Defined in: react/src/components/XYPad/Thumb.tsx:25

color?

optional color?: string;

Defined in: react/src/components/XYPad/Thumb.tsx:20

Size comes from the --thumb-size CSS variable on XYPad.Root, so that the root can reserve the matching amount of space around the area.

ref?

optional ref?: Ref<XYPadThumbMethods>;

Defined in: react/src/components/XYPad/Thumb.tsx:26

wrapperClassName?

optional wrapperClassName?: string;

Defined in: react/src/components/XYPad/Thumb.tsx:22

wrapperStyle?

optional wrapperStyle?: CSSProperties;

Defined in: react/src/components/XYPad/Thumb.tsx:23

Type Aliases

XY

type XY<T> = [T, T];

Defined in: dom/dist/index.d.ts:405

A pair of per-axis values. The tuple elements are labelled, so editors show [x: number, y: number] rather than a bare pair.

Type Parameters

Type Parameter
`T`

XYInput

type XYInput<T> = [T] extends [readonly unknown[]] ? readonly [T, T] : T | readonly [T, T];

Defined in: dom/dist/index.d.ts:413

A setting that may be given once for both axes, or per axis.

A single value is told from a pair with Array.isArray, so the single form is only offered while T cannot itself be an array. Where it can, the pair is the only way to write it, since a lone array would be read as a pair.

Type Parameters

Type Parameter
`T`

Variables

Root

const Root: ForwardRefExoticComponent<XYPadProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & RefAttributes<XYPadMethods>>;

Defined in: react/src/components/XYPad/index.tsx:145

XYPad

const XYPad: object;

Defined in: react/src/components/XYPad/index.tsx:381

Simple XYPad

Type Declaration

Area

Area: (__namedParameters) => Element;

Parameters

Parameter	Type
`__namedParameters`	`XYPadAreaProps` & `Omit`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`>, keyof `XYPadAreaProps`>

Returns

Element

Root

Root: ForwardRefExoticComponent<XYPadProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & RefAttributes<XYPadMethods>>;

Thumb

Thumb: (__namedParameters) => Element;

Parameters

Parameter	Type
`__namedParameters`	`Props`

Returns

Element

Functions

useXYPadContext()

Call Signature

function useXYPadContext(): XYPadContextValue;

Defined in: react/src/components/XYPad/context.tsx:42

Everything here is derived during render, so there is no state to keep in sync: value comes from the props of Root and the rest follows from it.

Returns

XYPadContextValue

Call Signature

function useXYPadContext<T>(selector): T;

Defined in: react/src/components/XYPad/context.tsx:43

Everything here is derived during render, so there is no state to keep in sync: value comes from the props of Root and the rest follows from it.

Type Parameters

Type Parameter
`T`

Parameters

Parameter	Type
`selector`	(`state`) => `T`

Returns

T

Interfaces​

XYPadAreaProps​

Properties​

children?​

className?​

color?​

height?​

ref?​

style?​

width?​

XYPadMethods​

Properties​

blur​

Returns​

focus​

Returns​

original​

XYPadProps​

Properties​

children​

Example​

disabled?​

dragSensitivity?​

Default​

externalStyles?​

cursor?​

userSelectNone?​

keyboard?​

max​

min​

onChange?​

Parameters​

Returns​

onDragEnd?​

Parameters​

Returns​

onDragStart?​

Parameters​

Returns​

readonly?​

reverse?​

scale?​

Default​

step?​

value​

wheel?​

XYPadThumbMethods​

Properties​

blur​

Returns​

focus​

Returns​

XYPadThumbProps​

Properties​

children?​

color?​

ref?​

wrapperClassName?​

wrapperStyle?​

Type Aliases​

XY​

Type Parameters​

XYInput​

Type Parameters​

Variables​

Root​

XYPad​

Type Declaration​

Area​

Parameters​

Returns​

Root​

Thumb​

Parameters​

Returns​

Functions​

useXYPadContext()​

Call Signature​

Returns​

Call Signature​

Interfaces

XYPadAreaProps

Properties

children?

className?

color?

height?

ref?

style?

width?

XYPadMethods

Properties

blur

Returns

focus

Returns

original

XYPadProps

Properties

children

Example

disabled?

dragSensitivity?

Default

externalStyles?

cursor?

userSelectNone?

keyboard?

max

min

onChange?

Parameters

Returns

onDragEnd?

Parameters

Returns

onDragStart?

Parameters

Returns

readonly?

reverse?

scale?

Default

step?

value

wheel?

XYPadThumbMethods

Properties

blur

Returns

focus

Returns

XYPadThumbProps

Properties

children?

color?

ref?

wrapperClassName?

wrapperStyle?

Type Aliases

XY

Type Parameters

XYInput

Type Parameters

Variables

Root

XYPad

Type Declaration

Area

Parameters

Returns

Root

Thumb

Parameters

Returns

Functions

useXYPadContext()

Call Signature

Returns

Call Signature