> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt) # Get features under the mouse pointer Use [`queryRenderedFeatures`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures) to show properties of hovered-over map elements. > Example code: **JavaScript** ```html Get features under the mouse pointer 





```

**React**

```jsx
import React, { useEffect, useRef, useState } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  const [displayFeatures, setDisplayFeatures] = useState();

  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: [-96, 37.8],
      zoom: 3
    });

    mapRef.current.getCanvas().style.cursor = 'crosshair';

    mapRef.current.on('mousemove', (e) => {
      const features = mapRef.current.queryRenderedFeatures(e.point);

      const displayProperties = [
        'type',
        'properties',
        'id',
        'layer',
        'source',
        'sourceLayer',
        'state'
      ];

      const formattedFeatures = features.map((feat) => {
        const displayFeat = {};
        displayProperties.forEach((prop) => {
          displayFeat[prop] = feat[prop];
        });
        return displayFeat;
      });

      setDisplayFeatures(formattedFeatures);
    });
  }, []);

  return (
    <>
      

      
        {JSON.stringify(displayFeatures, null, 2)}
      

    
  );
};

export default MapboxExample;
```