Custom

Custom component

Create a custom Knob component with useKnobContext.

Live Editor

function Example(props) {
    function GrowingCircle() {
        const state = useKnobContext('MyComponent');
        const p = state.percentage;
        return (
            <circle
                cx={state.center}
                cy={state.center}
                r={state.size * 0.5 * state.percentage - 6}
                style={{ fill: `oklch(0.5 100% ${150 + Math.floor(p * 100)})` }}
            />
        );
    }

    return (
        <Knob
            value={50}
            size={100}
            angleOffset={220}
            angleRange={280}
            min={0}
            max={100}
        >
            <GrowingCircle />
            <Arc arcWidth={5} color="#FC5A96" />
        </Knob>
    );
}

Result

Loading...

Custom pointer

Create custom pointer by providing CustomPointer to the Pointer component.

Live Editor

function Example(props) {
    function CustomPointer({ width, height, percentage }) {
        return (
            <rect
                x={-width * 0.5}
                width={width}
                height={5 + (height - 5) * percentage}
                fill={`hsl(${Math.round(360 * percentage)}, 50%, 50%)`}
            />
        );
    }

    return (
        <Knob size={100} angleOffset={220} angleRange={280} min={0} max={100}>
            <Arc arcWidth={5} color="#FC5A96" radius={47.5} />
            <Pointer width={3} height={40} radius={0} color="#FC5A96">
                <CustomPointer />
            </Pointer>
        </Knob>
    );
}

Result

Loading...

Custom scale

Create custom ticks by providing customScaleTick to the Scale component.

Live Editor

function Example(props) {
    function customScaleTick({
        tickWidth,
        tickHeight,
        translateX,
        translateY,
        angleOffset,
        stepSize,
        center,
        active,
        i,
    }) {
        return (
            <rect
                fill={`hsl(${(240 + (40 - i) * 4) % 360},100%, 60%)`}
                stroke="none"
                width={i === active ? tickWidth * 3 : tickWidth}
                height={i === active ? tickHeight * 3 : tickHeight}
                key={i}
                transform={`
            rotate(${angleOffset + stepSize * i} ${center[0]} ${center[1]})
            translate( ${translateX} ${translateY})
        `}
            />
        );
    }

    return (
        <Knob size={100} angleOffset={220} angleRange={280} min={0} max={100}>
            <Scale
                steps={40}
                tickWidth={1}
                tickHeight={5}
                radius={45}
                fn={customScaleTick}
            />
        </Knob>
    );
}

Result

Loading...