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.
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>
);
}
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;
};