@golfguiders/static-holes-react

React components for the GolfGuiders static hole images library. Two drop-in components — <Hole /> and <Course /> — with no markup or CSS boilerplate.

Install

npm install @golfguiders/static-holes-react

Usage

Single hole

import { Hole } from '@golfguiders/static-holes-react';

function HolePage({ courseId }: { courseId: string }) {
  return (
    <Hole
      apiKey="sk-your-api-key"
      courseId={courseId}
      holeNumber={7}
      size="medium"
    />
  );
}

Full course grid

import { Course } from '@golfguiders/static-holes-react';

function CoursePage({ courseId }: { courseId: string }) {
  return (
    <Course
      apiKey="sk-your-api-key"
      courseId={courseId}
      size="small"
      onHoleClick={(n) => console.log('Clicked hole', n)}
    />
  );
}

How it works

The component loads static-holes.js from the GolfGuiders CDN on first mount, calls init() with your API key, then delegates rendering to the vanilla library — so the React layer is just a thin wrapper around the same battle-tested DOM code.

No useState hooks for loading/error states required — the underlying library handles skeleton placeholders and inline error UI for you.

Props

See JSDoc on each component for the full list. Common ones:

| Prop | Type | Default | Notes | |---|---|---|---| | size | preset or {w,h} | 'medium' | preset = 'small' \| 'medium' \| 'large' | | markers | boolean | true | overlay tee + green icons | | label | boolean | true | corner stat card (hole · par · yards) | | rotate | boolean | true | hole points up (tee bottom, green top) | | theme | 'light' \| 'none' | 'light' | opt out to ship your own CSS |

<Course> also accepts columns, gap, holes, and onHoleClick.

Branding & watermark

Every image carries a brand watermark — baked into the image (so it survives save/share) and shown in the grid/lightbox. These props work on both <Hole> and <Course>:

<Course
  apiKey="sk-your-api-key"
  courseId="VpWOV5f97cI5"
  brand="eagle"
  watermarkPosition="bottom-right"
  watermarkBackground
  watermarkBackgroundColor="#ffffffcc"
/>

| Prop | Type | Default | Notes | |---|---|---|---| | brand | 'eagle' \| 'golfguiders' \| 'none' | 'golfguiders' | 'none' disables the watermark | | watermarkPosition | the 4 corners | 'bottom-right' | | | watermarkSize | number | 7 | logo height as % of the image (2–30) | | watermarkBackground | boolean | false | chip behind the logo (auto circle/pill) | | watermarkBackgroundColor | hex string | dark | e.g. '#ffffffcc' |

License

MIT © GolfGuiders, Inc.