useRControl

Hook to add React Control inside MapLibre.

Although it is possible to add components as children of RMap these will be added as children of the div.maplibregl-children element (see RMap: Children components

This hook combined with createPortal allows you to create custom controls that will integrate perfectly into your map.

As this hook use React Context internally you can't use this hook in the component using RMap but only in child component.

Usage

import {
  RMap,
  RNavigationControl,
  useRControl,
} from "maplibre-react-components";
import { createPortal } from "react-dom";
 
function CustomControl() {
  const { container } = useRControl({
    position: "top-right",
  });
 
  return createPortal(
    <div className="bg-gray-0 p-4">
      <h3>Custom React control</h3>
      <div>add your content Here</div>
    </div>,
    container,
  );
}
 
export default function App() {
  return (
    <RMap>
      <RNavigationControl />
      <CustomControl />
    </RMap>
  );
}

Reference

type RControlHookOptions = {
  position: ControlPosition;
  /**
   * default: "maplibregl-ctrl maplibregl-ctrl-group"
   * if you define another value it will overwrite default className.
   */
  className?: string;
}
 
type RControlHookReturn = {
  container: HTMLDivElement;
};