Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA compass bearing control that shows the heading in degrees and as a cardinal point (N, NE, E and so on), snaps to 5 degrees and has quick buttons for the four directions.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when bearings, wind directions, camera or antenna pointing, maps and drone tools.
Do not use it when angles are pure geometry (use the plain Angle Slider).
It composes button, angle-slider, which the CLI installs for you.
import { AngleSliderHeadingCompass } from "@/components/angle-slider-heading-compass"<AngleSliderHeadingCompass
heading={135}
onChange={(degrees, point) => map.setBearing(degrees)}
/>| Prop | Type | Required | Description |
|---|---|---|---|
heading | number | optional | - |
onChange | (degrees: number, cardinal: string) => void | optional | - |
The pattern ships with a Testing Library test (angle-slider-heading-compass.test.tsx) that covers the cardinal names, text output, snapping and the quick buttons.