Custom Control

The generic useControl is used to construct React components for controls.

Below is an example of how we use it to create the ZoomControl, you can adapt it to your own Control.

Example

import type { Options as OlZoomOptions } from "ol/control/Zoom";

import Zoom from "ol/control/Zoom";

import type { ControlOptions } from "./use-control";

import { useControl } from "./use-control";

export interface ZoomControlProps extends ControlOptions<OlZoomOptions> {} 

export const ZoomControl = (props: ZoomControlProps) => {
  useControl<Zoom, ZoomControlProps>(Zoom, props); 

  return null;
};

If you want correct type hints in your editor for props on useControl inferred from your Control you need to pass the generic types. This is only required if you want to modify the props argument within the useControl invoke. In the example they aren't required but are provided for verbosity/showcase.