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