メインコンテンツまでスキップ

components/Knob

Interfaces​

KnobMethods​

Defined in: react/src/components/Knob/index.tsx:169

Properties​

blur​
blur: () => void;

Defined in: react/src/components/Knob/index.tsx:171

Returns​

void

focus​
focus: () => void;

Defined in: react/src/components/Knob/index.tsx:170

Returns​

void

KnobProps​

Defined in: react/src/components/Knob/index.tsx:47

Properties​

angleRange?​
optional angleRange?: number;

Defined in: react/src/components/Knob/index.tsx:149

angle range [degree]

children​
children: ReactNode;

Defined in: react/src/components/Knob/index.tsx:166

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

Example​
<Knob.Root value={value} min={0} max={100} onChange={setValue}>
  <Knob.SVGRoot>
    <Knob.InactiveLine />
    <Knob.ActiveLine />
    <Knob.Thumb />
  </Knob.SVGRoot>
</Knob.Root>
defaultValue?​
optional defaultValue?: number;

Defined in: react/src/components/Knob/index.tsx:71

value set when double-clicking restriction: enableDoubleClickDefault = true

Default​
min
See​

enableDoubleClickDefault

disabled?​
optional disabled?: boolean;

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

dragSensitivity?​
optional dragSensitivity?: ModifierValue<number>;

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

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

1 is the normal travel of 100px for the whole range; 0.1 makes the same movement cover a tenth of it. 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. It takes effect on the next movement, since a key on its own produces no pointer event.

Default​
{ default: 1, shift: 0.1 }
enableDoubleClickDefault?​
optional enableDoubleClickDefault?: boolean;

Defined in: react/src/components/Knob/index.tsx:143

externalStyles?​
optional externalStyles?: object;

Defined in: react/src/components/Knob/index.tsx:89

Global style to apply when dragged

cursor?​
optional cursor?: Cursor;
userSelectNone?​
optional userSelectNone?: boolean;
Default​
defaultExternalStyles
keyboard?​
optional keyboard?: InputEventOptions | null;

Defined in: react/src/components/Knob/index.tsx:142

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;

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

min​
min: number;

Defined in: react/src/components/Knob/index.tsx:50

onChange?​
optional onChange?: (value) => void;

Defined in: react/src/components/Knob/index.tsx:151

Parameters​
ParameterType
valuenumber
Returns​

void

pointerLock?​
optional pointerLock?: boolean;

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

Hide the cursor while dragging and read the pointer movement directly, rather than letting it wander off across the screen.

A knob does not care where the pointer is, only how far it moved, and letting it wander costs twice: the cursor ends up far from the knob it is holding, and the drag stops at the edge of the screen, where the operating system pins the pointer and the coordinates stop changing. A dragSensitivity below 1 reaches that edge quickly.

Off by default because it is not free: the browser shows its own notice, Esc takes the lock back, and the request needs a user gesture and can be refused. A refused request is not an error — the drag simply carries on as an ordinary one.

Default​
false
readonly?​
optional readonly?: boolean;

Defined in: react/src/components/Knob/index.tsx:146

scale?​
optional scale?: Scale;

Defined in: react/src/components/Knob/index.tsx:64

How the value 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
size?​
optional size?: string | number;

Defined in: react/src/components/Knob/index.tsx:83

Width and height of the knob. Sets --knob-size; the size the theme gives it stands when this is omitted.

startValue?​
optional startValue?: number;

Defined in: react/src/components/Knob/index.tsx:77

Value to be used as the starting point of the line when drawing.

Default​
min
step?​
optional step?: number;

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

value​
value: number;

Defined in: react/src/components/Knob/index.tsx:49

wheel?​
optional wheel?: InputEventOptions | null;

Defined in: react/src/components/Knob/index.tsx:97

wheel control option If null, no event will be triggered

Variables​

Knob​

const Knob: object;

Defined in: react/src/components/Knob/index.tsx:343

Interactive rotary knob component implemented in SVG.

Type Declaration​

ActiveLine​
ActiveLine: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersOmit<SVGProps<SVGPathElement>, "d">
Returns​

Element

InactiveLine​
InactiveLine: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersOmit<SVGProps<SVGPathElement>, "d">
Returns​

Element

Root​
Root: ForwardRefExoticComponent<KnobProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KnobProps> & RefAttributes<KnobMethods>>;
SVGRoot​
SVGRoot: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersSVGRootProps & Omit<SVGProps<SVGSVGElement>, "children">
Returns​

Element

Thumb​
Thumb: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersProps & Omit<SVGProps<SVGSVGElement>, "d" | keyof Props>
Returns​

Element

Root​

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

Defined in: react/src/components/Knob/index.tsx:182

Functions​

useKnobContext()​

Call Signature​

function useKnobContext(): KnobContextValue;

Defined in: react/src/components/Knob/context.tsx:82

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​

KnobContextValue

Call Signature​

function useKnobContext<T>(selector): T;

Defined in: react/src/components/Knob/context.tsx:83

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​
ParameterType
selector(state) => T
Returns​

T