import { Map, TileLayer } from 'react-leaflet';
import VectorGrid from 'react-leaflet-vectorgrid';
 
const options = {
    type: 'slicer',
    data: {geojson},
    idField: 'OBJECTID',
    tooltip: 'NAME',
    popup: (layer) => `<div>${layer.properties.NAME}</div>`,
    style: {
        weight: 0.5,
        opacity: 1,
        color: '#ccc',
        fillColor: '#390870',
        fillOpacity: 0.6,
        fill: true,
        stroke: true
    },
    hoverStyle: {
        fillColor: '#390870',
        fillOpacity: 1
    },
    activeStyle: {
        fillColor: '#390870',
        fillOpacity: 1
    },
    zIndex: 401
};
 
<Map center={[2.935403, 101.448205]} zoom={4}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
 
  <VectorGrid {...options} onClick={this.onClick} />
</Map>

import { Map, TileLayer } from 'react-leaflet';
import VectorGrid from 'react-leaflet-vectorgrid';
 
const options = {
    type: 'protobuf',
    url: 'https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}'
    vectorTileLayerStyles: { ... },
    subdomains: 'abcd',
    key: 'abcdefghi01234567890'
};
 
<Map center={[2.935403, 101.448205]} zoom={4}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
 
  <VectorGrid {...options} />
</Map>

import { Map, withLeaflet } from 'react-leaflet';
import VectorGridDefault from 'react-leaflet-vectorgrid';
 
// wrap the VectorGrid component using `withLeaflet` HOC
const VectorGrid = withLeaflet(VectorGridDefault);
 
// use <VectorGrid /> component as you would use it in react-leaflet v1