> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt) # Add a geocoder This example adds a geocoding control to a web map, enabling users to search the map for a place. It adds the control by loading the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) plugin inside a `

``` **React** ```jsx import React, { useEffect, useRef } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; import 'mapbox-gl/dist/mapbox-gl.css'; import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); useEffect(() => { mapRef.current = new mapboxgl.Map({ // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', container: mapContainerRef.current, style: 'mapbox://styles/mapbox/standard', center: [-79.4512, 43.6568], zoom: 13 }); mapRef.current.addControl( new MapboxGeocoder({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', useBrowserFocus: true, mapboxgl: mapboxgl }) ); return () => mapRef.current.remove(); }, []); return

; }; export default MapboxExample; ```